/*
*
*         DEFINE ROLL20 GRIMOIRE COLORS     
*
*/

:root {
    --color-surface1: #ffffff;
    --color-surface2: #f5f5f5;
    --color-card: #FEF2F9;
    --color-text: #1E1523;
    --color-text-secondary: #625B65;
    --color-text-tertiary: #A5A1A7;
    --color-text-disabled: #E9E8E9;
    --color-primary-base: #E10085;
    --color-primary-text: #E10085;
    --color-secondary-base: #702C91;
    --color-secondary-text: #702C91;
    --color-proficiency-base: #0B7BB8;
    --color-proficiency-text: #0B7BB8;
    --color-hp-base: #00853C;
    --color-hp-text: #00853C;
    --color-critical-base: #DA1C17;
    --color-critical-text: #DA1C17;
    --color-warning-base: #FFAB00;
    --color-warning-text: #996700;
}

/* @media (prefers-color-scheme: light) { */
html[data-theme="light"] {
    --color-glass1: rgba(255, 255, 255, 0.6);
    --color-glass2: rgba(31, 41, 55, 0.06);
    --color-glass3: #DBDADC;
    --color-background: #f5f5f5;
    --color-surface1: #FFFFFF;
    --color-surface2: #f5f5f5;
    --color-surface3: rgba(255, 255, 255, 0.4);
    --color-surface4: rgba(233, 233, 233, 0.72);
    --color-grayscale1: #1E1523;
    --color-grayscale2: #625B65;
    --color-grayscale3: #A5A1A7;
    --color-grayscale4: #E9E8E9;
    --color-primary1: #5A0035;
    --color-primary2: #870050;
    --color-primary3: #B4006A;
    --color-primary4: #E10085;
    --color-primary5: #E7339D;
    --color-primary6: #ED66B6;
    --color-primary7: #F399CE;
    --color-primary8: #F9CCE7;
    --color-primary9: #FCE6F3;
    --color-expertise1: #2D123A;
    --color-expertise2: #431A57;
    --color-expertise3: #5A2374;
    --color-expertise4: #702C91;
    --color-expertise5: #8D56A7;
    --color-expertise6: #A980BD;
    --color-expertise7: #C6ABD3;
    --color-blue1: #04314A;
    --color-blue2: #074A6E;
    --color-blue3: #096293;
    --color-blue4: #0B7BB8;
    --color-blue5: #3C95C6;
    --color-blue6: #6DB0D4;
    --color-blue7: #9DCAE3;
    --color-blue8: #CEE5F1;
    --color-green1: #003518;
    --color-green2: #005024;
    --color-green3: #006A30;
    --color-green4: #00853C;
    --color-green5: #339D63;
    --color-green6: #66B68A;
    --color-green7: #99CEB1;
    --color-red1: #570B09;
    --color-red2: #83110E;
    --color-red3: #AE1612;
    --color-red4: #DA1C17;
    --color-red5: #E14945;
    --color-red6: #E97774;
    --color-red7: #F0A4A2;
    --color-yellow1: #664400;
    --color-yellow2: #996700;
    --color-yellow3: #CC8900;
    --color-yellow4: #FFAB00;
    --color-yellow5: #FFBC33;
    --color-yellow6: #FFCD66;
    --color-yellow7: #FFDD99;
    --color-yellow8: #FFEECC;

    /* Buttons */
    --color-button-base: var(--color-primary-base);
    --color-button-primary: var(--color-primary4);
    --color-button-primary-hover: #ED008C;
    --color-button-primary-focus: #f498cf;
    --color-button-secondary: var(--color-surface1);
    --color-button-secondary-text: var(--color-primary4);
    --color-button-secondary-border: var(--color-primary4);
    --color-button-secondary-hover: #ED008C;
    --color-button-secondary-hover-text: var(--color-filled-button-text);
    --color-button-secondary-focus: #f498cf;
    --color-button-tertiary: transparent;
    --color-button-tertiary-text: var(--color-primary4);
    --color-button-tertiary-hover: #F9CCE7;
    --color-button-tertiary-hover-text: var(--color-primary4);
    --color-button-tertiary-focus: #f498cf;
    --color-button-background-light: var(--color-grayscale4);
    --color-button-disabled: #E9E8E9;
    --color-button-disabled-text: #A5A1A7;
    --color-filled-button-text: #ffffff;

    /* Text */
    --color-primary-text: var(--color-primary4);
    --color-primary-hover: #ED008C;
    --color-secondary-text: var(--color-expertise4);
    --color-tertiary-text: var(--color-primary4);
    --color-text-disabled: var(--color-grayscale4);
    --color-text-dark: #1F1F1F;
    --color-demiplane-read: #009AE6;
    --color-compendium-rules: var(--color-primary5);

    /* Link/Anchor */
    --color-link-visited: var(--color-primary2);

    /* Input */
    --color-input-hover: var(--color-primary4);

    /* Additional Color Combos */
    --color-chip-gray: var(--color-grayscale2);
    --color-chip-blue: var(--color-blue4);
    --color-chip-red: var(--color-red4);
    --color-chip-yellow: var(--color-yellow4);
    --color-chip-yellow-text: var(--color-grayscale1);
    --color-chip-filled-text: #ffffff;
    --color-chip-faded-primary: #F9CCE7;
    --color-chip-faded-gray: var(--color-grayscale4);
    --color-chip-faded-green: #CCE7D8;
    --color-chip-faded-blue: #CEE5F1;
    --color-chip-faded-red: #F8D2D1;
    --color-chip-faded-yellow: #FFEECC;
    --color-chip-faded-primary-text: var(--color-primary3);
    --color-chip-faded-gray-text: var(--color-grayscale1);
    --color-chip-faded-green-text: var(--color-green3);
    --color-chip-faded-blue-text: var(--color-blue1);
    --color-chip-faded-red-text: var(--color-red3);
    --color-chip-faded-yellow-text: var(--color-yellow1);

    /* Notifications Snackbar */
    --color-notification-snackbar-error: #F8D2D1;
    --color-notification-snackbar-error-text: var(--color-grayscale1);
    --color-notification-snackbar-error-action: var(--color-red3);

    /* Notifications Banner */
    --color-notification-banner-info: #BBE3F7;
    --color-notification-banner-info-text: #11252F;
    --color-notification-banner-warning: var(--color-yellow8);
    --color-notification-banner-warning-text: var(--color-yellow1);
    --color-notification-banner-error: #F8D2D1;
    --color-notification-banner-error-text: var(--color-red2);
    --color-welcome-ctas: var(--color-grayscale1);
    --color-welcome-p: #444444;

    /* Custom Component Combos */
    --compendium-odd-attribute-background-color: var(--color-grayscale4); /* Custom for compendium attribute odd rows */
    --compendium-attribute-text-color: var(--color-grayscale1);

    /* Shadows */
    --drop-shadow-base: 0.0px 1.0px 2.0px 0px rgba(31, 41, 55, 0.08);
    --drop-shadow-medium: 0.0px 4.0px 6.0px 0px rgba(31, 41, 55, 0.1),0.0px 2.0px 4.0px 0px rgba(31, 41, 55, 0.06);
    --drop-shadow-large: 0.0px 0.0px 6.0px 0px rgba(31, 41, 55, 0.05),0.0px 10.0px 15.0px 0px rgba(31, 41, 55, 0.1);
    --drop-shadow-xlarge: 0.0px 10.0px 10.0px 0px rgba(31, 41, 55, 0.04),0.0px 20.0px 25.0px 0px rgba(31, 41, 55, 0.1);

    /* Inputs */
    --input-filter: none;

    --compendium-strong: #8E5620;

    /* Skeletons */
    --skeleton-light: rgb(245, 245, 245);
    --skeleton-dark: rgb(217, 217, 217);

    /* subscription pills */
    --r20-tier-plus: #702c91;
    --r20-tier-pro: #b4006a;
    --r20-tier-elite: #0b7bb8;
}

/* @media (prefers-color-scheme: dark) { */
html[data-theme="dark"] {
    --color-glass1: rgba(0, 0, 0, 0.5);
    --color-glass2: rgb(0, 0, 0, 0.3);
    --color-glass3: rgba(230, 230, 230, 0.1);
    --color-background: #0C0C0C;
    --color-surface1: #1F1F1F;
    --color-surface2: #353535;
    --color-surface3: rgba(40, 40, 40, 1);
    --color-surface4: rgba(22, 22, 22, 1);
    --color-grayscale1: #E6E6E6;
    --color-grayscale2: #B3B3B3;
    --color-grayscale3: #666666;
    --color-grayscale4: #333333;
    --color-primary1: #2D123A;
    --color-primary2: #431A57;
    --color-primary3: #5A2374;
    --color-primary4: #702C91;
    --color-primary5: #8D56A7;
    --color-primary6: #A980BD;
    --color-primary7: #C6ABD3;
    --color-primary8: #E2D5E9;
    --color-primary9: #F8F0FC;
    --color-expertise1: #5A0035;
    --color-expertise2: #870050;
    --color-expertise3: #B4006A;
    --color-expertise4: #E10085;
    --color-expertise5: #E7339D;
    --color-expertise6: #ED66B6;
    --color-expertise7: #F399CE;
    --color-blue1: #224A5E;
    --color-blue2: #326E8E;
    --color-blue3: #4393BD;
    --color-blue4: #54B8EC;
    --color-blue5: #76C6F0;
    --color-blue6: #98D4F4;
    --color-blue7: #BBE3F7;
    --color-blue8: #DDF1FB;
    --color-green1: #0A4525;
    --color-green2: #106837;
    --color-green3: #158A4A;
    --color-green4: #1AAD5C;
    --color-green5: #48BD7D;
    --color-green6: #76CE9D;
    --color-green7: #A3DEBE;
    --color-red1: #572124;
    --color-red2: #833236;
    --color-red3: #AE4248;
    --color-red4: #DA535A;
    --color-red5: #E1757B;
    --color-red6: #E9989C;
    --color-red7: #F0BABD;
    --color-yellow1: #664400;
    --color-yellow2: #996700;
    --color-yellow3: #CC8900;
    --color-yellow4: #FFAB00;
    --color-yellow5: #FFBC33;
    --color-yellow6: #FFCD66;
    --color-yellow7: #FFDD99;
    --color-yellow8: #FFEECC;

    /* Buttons */
    --color-button-base: var(--color-primary4);
    --color-button-primary: var(--color-primary4);
    --color-button-primary-hover: var(--color-primary5);
    --color-button-primary-focus: #c7aad2;
    --color-button-secondary: var(--color-surface1);
    --color-button-secondary-text: var(--color-filled-button-text);
    --color-button-secondary-border: var(--color-primary5);
    --color-button-secondary-hover: var(--color-primary5);
    --color-button-secondary-hover-text: var(--color-filled-button-text);
    --color-button-secondary-focus: #c7aad2;
    --color-button-tertiary: transparent;
    --color-button-tertiary-text: var(--color-primary6);
    --color-button-tertiary-hover: #E2D5E9;
    --color-button-tertiary-hover-text: var(--color-primary4);
    --color-button-tertiary-focus: #8d57a8;
    --color-button-background-light: var(--color-grayscale2);
    --color-button-disabled: #B3B3B3;
    --color-button-disabled-text: #666666;
    --color-filled-button-text: #ffffff;
    
    /* Text */
    --color-primary-text: var(--color-primary6);
    --color-primary-hover: var(--color-primary7);
    --color-secondary-text: var(--color-expertise6);
    --color-tertiary-text: var(--color-primary4);
    --color-text-disabled: var(--color-grayscale4);
    --color-text-dark: var(--color-surface1);
    --color-demiplane-read: #fff;
    --color-compendium-rules: #fff;

    /* Link/Anchor */
    --color-link-visited: var(--color-primary5);

    /* Input */
    --color-input-hover: var(--color-primary6);

    /* Additional Color Combos */
    --color-chip-gray: var(--color-grayscale3);
    --color-chip-blue: var(--color-blue2);
    --color-chip-red: var(--color-red3);
    --color-chip-yellow: var(--color-yellow4);
    --color-chip-yellow-text: var(--color-grayscale4);
    --color-chip-filled-text: #ffffff;
    --color-chip-faded-primary: #E2D5E9;
    --color-chip-faded-gray: var(--color-grayscale1);
    --color-chip-faded-green: #D1EFDE;
    --color-chip-faded-blue: #DDF1FB;
    --color-chip-faded-red: #F8DDDE;
    --color-chip-faded-yellow: #FFEECC;
    --color-chip-faded-primary-text: var(--color-primary4);
    --color-chip-faded-gray-text: var(--color-surface1);
    --color-chip-faded-green-text: var(--color-green2);
    --color-chip-faded-blue-text: var(--color-blue1);
    --color-chip-faded-red-text: var(--color-red2);
    --color-chip-faded-yellow-text: var(--color-yellow1);
    --color-card: var(--color-primary8);
    --color-welcome-ctas: var(--color-grayscale4);
    --color-welcome-p: #444444;
    
    /* Notifications Snackbar */
    --color-notification-snackbar-error: var(--color-red3);
    --color-notification-snackbar-error-text: var(--color-grayscale1);
    --color-notification-snackbar-error-action: #F8DDDE;

    /* Notifications Banner */
    --color-notification-banner-info: var(--color-blue2);
    --color-notification-banner-info-text: var(--color-blue8);
    --color-notification-banner-warning: var(--color-yellow6);
    --color-notification-banner-warning-text: var(--color-yellow1);
    --color-notification-banner-error: var(--color-red2);
    --color-notification-banner-error-text: #F8DDDE;

    /* Custom Component Combos */
    --compendium-odd-attribute-background-color: var(--color-grayscale3); /* Custom for compendium attribute odd rows */
    --compendium-attribute-text-color: var(--color-grayscale1);

    /* Shadows */
    --drop-shadow-base: 0.0px 1.0px 2.0px 0px rgba(31, 41, 55, 0.08);
    --drop-shadow-medium: 0.0px 3.0px 5.0px 0px rgba(0, 0, 0, 0.2),0.0px 1.0px 18.0px 0px rgba(0, 0, 0, 0.12),0.0px 6.0px 10.0px 0px rgba(0, 0, 0, 0.14);
    --drop-shadow-large: 0.0px 3.0px 5.0px 0px rgba(0, 0, 0, 0.2),0.0px 1.0px 18.0px 0px rgba(0, 0, 0, 0.12),0.0px 6.0px 10.0px 0px rgba(0, 0, 0, 0.14);
    --drop-shadow-xlarge: 0.0px 7.0px 8.0px 0px rgba(0, 0, 0, 0.2),0.0px 5.0px 22.0px 0px rgba(0, 0, 0, 0.12),0.0px 12.0px 17.0px 0px rgba(0, 0, 0, 0.14);

    /* Inputs */
    --input-filter: invert(1);

    --compendium-strong: #A82020;

    /* Skeletons */
    --skeleton-light: var(--color-grayscale2);
    --skeleton-dark: var(--color-grayscale3);

    /* Subscription tier pill colors - dark mode */
    --r20-tier-plus: #702c91; /* Same as light mode */
    --r20-tier-pro: #b4006a; /* Same as light mode */
    --r20-tier-elite: #326e8e;
}