/*
  EarQuest design tokens. BlazorBase supplies the colour, spacing, radius and type scales and is linked
  before this file. The playful palette below overrides the BlazorBase accent and status colours for the
  light and the dark theme; the --eq-* tokens expose the raw brand colours to components.

  The dark theme is declared twice on purpose, exactly like BlazorBase does it: once behind the
  prefers-color-scheme media query (guarded so an explicit light choice still wins) and once behind the
  data-theme="dark" stamp of an explicit choice.
*/

@font-face {
    font-family: "EarQuest Rounded";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "EarQuest Rounded";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --space-7: 48px;
    --shell-max: 1120px;
    --tap-target: 44px;
    --shadow-raised: 0 6px 24px #0000001F;

    --eq-violet: #6C4BD8;
    --eq-orange: #FF8A3D;
    --eq-green: #3CC97A;
    --eq-coral: #FF5A6E;
    --eq-gold: #FFC93C;
    --eq-night: #2B1B5A;
    --eq-gold-edge: #C8901A;
    --eq-gold-text: #A86A12;

    --color-accent: #6C4BD8;
    --color-accent-fill: #6C4BD8;
    --color-accent-fill-hover: #5B3CC4;
    --color-accent-fill-pressed: #4B2FA8;
    --color-text-on-accent: #FFFFFF;
    --color-bg-selected: #6C4BD81A;
    --color-border-focus: #6C4BD8;

    --color-success: #1E9A57;
    --color-warning: #B7791F;
    --color-danger: #D6334A;

    --font-display: "EarQuest Rounded", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --font-base: "EarQuest Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;

    --color-bg-surface: #F6F3FF;
    --color-bg-subtle: #EBE6FA;
    --color-bg-hover: #EFEAFC;
    --color-border: #E1DAF5;
    --color-border-strong: #C9BEEA;
    --color-text-primary: #1D1537;
    --color-text-secondary: #4A4170;
    --color-text-muted: #6A6290;

    --eq-world-meadow-band: #DDF6E6;
    --eq-world-meadow-accent: #2FB56B;
    --eq-world-mountains-band: #E1E8F5;
    --eq-world-mountains-accent: #6F86B8;
    --eq-world-cave-band: #E9DFFB;
    --eq-world-cave-accent: #8A5CE0;
    --eq-world-lake-band: #D6F2F0;
    --eq-world-lake-accent: #1FA9A2;
    --eq-world-castle-band: #FFF0C2;
    --eq-world-castle-accent: #D99A0B;

    --eq-world-meadow-on-accent: #2B1B5A;
    --eq-world-lake-on-accent: #2B1B5A;
    --eq-world-castle-on-accent: #2B1B5A;
    --eq-world-cave-on-accent: #FFFFFF;
    --eq-world-mountains-on-accent: #FFFFFF;
    --eq-daily-on-accent: #2B1B5A;

    --critter-pad-fill: var(--color-bg-elevated);
    --critter-pad-label-bg: var(--color-bg-subtle);
}

.world--meadow {
    --world-on-accent: var(--eq-world-meadow-on-accent);
}

.world--lake {
    --world-on-accent: var(--eq-world-lake-on-accent);
}

.world--castle {
    --world-on-accent: var(--eq-world-castle-on-accent);
}

.world--cave {
    --world-on-accent: var(--eq-world-cave-on-accent);
}

.world--mountains {
    --world-on-accent: var(--eq-world-mountains-on-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --eq-world-meadow-band: #14352A;
        --eq-world-meadow-accent: #2FB56B;
        --eq-world-mountains-band: #1F2742;
        --eq-world-mountains-accent: #7F95C8;
        --eq-world-cave-band: #2B1B55;
        --eq-world-cave-accent: #9B72F0;
        --eq-world-lake-band: #0F3A40;
        --eq-world-lake-accent: #25B3AC;
        --eq-world-castle-band: #3A2E12;
        --eq-world-castle-accent: #E8AC1C;
        --eq-gold-edge: #E0A92E;
        --eq-gold-text: #F2C14E;
        --critter-pad-fill: #2A2158;
        --critter-pad-label-bg: #271E50;

        --color-bg-surface: #150F2B;
        --color-bg-elevated: #1E1740;
        --color-bg-subtle: #1A1436;
        --color-bg-hover: #271E50;
        --color-bg-selected: #6C4BD838;

        --color-border: #342A62;
        --color-border-strong: #463A7E;
        --color-border-focus: #A48BFF;

        --color-accent: #A48BFF;
        --color-accent-fill: #6C4BD8;
        --color-accent-fill-hover: #5B3CC4;
        --color-accent-fill-pressed: #4B2FA8;
        --color-text-on-accent: #FFFFFF;

        --color-success: #3CC97A;
        --color-warning: #FFC93C;
        --color-danger: #FF5A6E;
        --color-danger-bg: #FF5A6E1F;
        --color-text-on-danger: #1B0E10;
    }
}

:root[data-theme="dark"] {
    --eq-world-meadow-band: #14352A;
    --eq-world-meadow-accent: #2FB56B;
    --eq-world-mountains-band: #1F2742;
    --eq-world-mountains-accent: #7F95C8;
    --eq-world-cave-band: #2B1B55;
    --eq-world-cave-accent: #9B72F0;
    --eq-world-lake-band: #0F3A40;
    --eq-world-lake-accent: #25B3AC;
    --eq-world-castle-band: #3A2E12;
    --eq-world-castle-accent: #E8AC1C;
    --eq-gold-edge: #E0A92E;
    --eq-gold-text: #F2C14E;
    --critter-pad-fill: #2A2158;
    --critter-pad-label-bg: #271E50;

    --color-bg-surface: #150F2B;
    --color-bg-elevated: #1E1740;
    --color-bg-subtle: #1A1436;
    --color-bg-hover: #271E50;
    --color-bg-selected: #6C4BD838;

    --color-border: #342A62;
    --color-border-strong: #463A7E;
    --color-border-focus: #A48BFF;

    --color-accent: #A48BFF;
    --color-accent-fill: #6C4BD8;
    --color-accent-fill-hover: #5B3CC4;
    --color-accent-fill-pressed: #4B2FA8;
    --color-text-on-accent: #FFFFFF;

    --color-success: #3CC97A;
    --color-warning: #FFC93C;
    --color-danger: #FF5A6E;
    --color-danger-bg: #FF5A6E1F;
    --color-text-on-danger: #1B0E10;
}