/**
 * Design Tokens - Ragnarok Frontier (G1)
 *
 * Warm parchment palette, golden sunlight through tall windows.
 * Dark theme: evening at the hearth, dark walnut wood, firelight amber.
 */

:root {
    /* --- Surfaces --- */
    --bg-page: #EDE6DA;
    --bg-surface: #FFFCF6;
    --bg-surface-alt: #F8F3EB;
    --bg-nav: #2F271E;
    --bg-nav-2: #362E24;
    --bg-nav-hover: rgba(255,255,255,.06);
    --bg-nav-active: rgba(212,164,60,.14);
    --bg-muted: #E6DDCF;
    --bg-inset: #DDD3C3;
    --bg-sidebar: var(--bg-surface-alt);

    /* --- Text --- */
    --text-primary: #241E16;
    --text-secondary: #6D5F4F;
    --text-muted: #9A8B78;
    --text-tertiary: #9A8B78;
    --text-on-nav: #B8AA96;
    --text-on-nav-hover: #D8CCBC;
    --text-on-nav-active: #D4A43C;

    /* --- Borders --- */
    --border: #D5CABC;
    --border-subtle: #E2D9CC;
    --border-strong: #C0B3A2;

    /* --- Gold (primary accent) --- */
    --gold: #BE8518;
    --gold-bright: #D49A22;
    --gold-pale: #F6EACE;
    --gold-wash: rgba(190,133,24,.06);
    --gold-fg: #FFFFFF;

    /* --- Backward-compat aliases --- */
    --primary: var(--gold);
    --primary-hover: var(--gold-bright);
    --primary-foreground: var(--gold-fg);
    --primary-muted: var(--gold-pale);

    /* --- Success (forest green) --- */
    --green: #3C7F5C;
    --green-pale: #E2F0E8;
    --green-bright: #3C7F5C;
    --success: var(--green);
    --success-bg: var(--green-pale);
    --success-border: #B0D8C0;
    --success-text: #2C6B48;

    /* --- Warning (gold) --- */
    --warning: #D49A22;
    --warning-bg: var(--gold-pale);
    --warning-border: #E8D5A0;
    --warning-text: #9A7014;

    /* --- Error (earth red) --- */
    --red: #B04030;
    --red-pale: #F6E6E2;
    --error: var(--red);
    --error-bg: var(--red-pale);
    --error-border: #E0B8B0;
    --error-text: #8C3028;

    /* --- Destructive --- */
    --destructive: var(--red);
    --destructive-hover: #8C3028;
    --destructive-foreground: #FFFFFF;

    /* --- Info (lake blue) --- */
    --blue: #3E72A8;
    --blue-pale: #E0EDF6;
    --info: var(--blue);
    --info-bg: var(--blue-pale);
    --info-border: #B0CDE0;
    --info-text: #2E5A88;

    /* --- Amethyst --- */
    --purple: #7660A8;
    --purple-pale: rgba(118,96,168,.07);

    /* --- Special purpose --- */
    --color-money: var(--gold);
    --color-online: var(--green);
    --color-offline: #9A8B78;
    --money: var(--gold);

    /* --- Overlay --- */
    --overlay-bg: rgba(255, 252, 246, 0.8);
    --overlay-backdrop: rgba(0, 0, 0, 0.4);

    /* --- Focus --- */
    --ring: var(--gold);
    --ring-offset: 2px;

    /* --- Border radius --- */
    --radius-sm: 5px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* --- Shadows (warm-tinted) --- */
    --shadow-sm: 0 1px 2px rgba(36,30,22,.06);
    --shadow: 0 1px 3px rgba(36,30,22,.06), 0 4px 12px rgba(36,30,22,.04);
    --shadow-md: 0 2px 4px rgba(36,30,22,.06), 0 8px 24px rgba(36,30,22,.06);
    --shadow-lg: 0 4px 8px rgba(36,30,22,.06), 0 16px 40px rgba(36,30,22,.08);
    --shadow-xl: 0 8px 16px rgba(36,30,22,.08), 0 24px 48px rgba(36,30,22,.10);
    --shadow-gold: 0 0 0 1px rgba(190,133,24,.1), 0 4px 16px rgba(190,133,24,.08);
    --shadow-card-hover: 0 2px 4px rgba(36,30,22,.06), 0 12px 32px rgba(36,30,22,.08);

    /* --- Typography --- */
    --font-display: 'Cinzel', Georgia, serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans: var(--font-body);
    --font-mono: 'Cascadia Code', ui-monospace, 'Source Code Pro', Menlo, Consolas, monospace;

    /* --- Spacing --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* --- Layout --- */
    --nav-height: 52px;

    /* --- Hero --- */
    --hero-grad: linear-gradient(175deg,
        rgba(237,230,218,0) 0%,
        rgba(237,230,218,.08) 25%,
        rgba(237,230,218,.5) 58%,
        rgba(237,230,218,.94) 82%,
        rgba(237,230,218,1) 100%);
    --hero-text: #241E16;
    --hero-sub: #6D5F4F;
    --hero-pill-bg: rgba(255,252,246,.82);
    --hero-pill-text: #241E16;
    --hero-pill-border: 1px solid rgba(213,202,188,.5);
    --hero-level: #9A8B78;
    --hero-sprite: drop-shadow(0 3px 5px rgba(36,30,22,.18));

    /* --- Atmospheric glow --- */
    --page-glow: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(214,170,70,.04) 0%, transparent 70%);

    /* --- Transitions --- */
    --t: .3s cubic-bezier(.4,0,.2,1);
}

/* --- Dark theme: OS preference --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-page: #13100C;
        --bg-surface: #1D1914;
        --bg-surface-alt: #221E17;
        --bg-nav: #0C0A08;
        --bg-nav-2: #13100C;
        --bg-nav-hover: rgba(255,255,255,.04);
        --bg-nav-active: rgba(212,164,60,.1);
        --bg-muted: #272119;
        --bg-inset: #1A1610;
        --bg-sidebar: var(--bg-surface-alt);

        --text-primary: #E2D8C8;
        --text-secondary: #B5A890;
        --text-muted: #7E7264;
        --text-tertiary: #7E7264;
        --text-on-nav: #8A7E6E;
        --text-on-nav-hover: #C0B4A2;
        --text-on-nav-active: #D4A43C;

        --border: #352E24;
        --border-subtle: #2C261D;
        --border-strong: #453C30;

        --gold: #DAA030;
        --gold-bright: #E8B240;
        --gold-pale: rgba(218,160,48,.11);
        --gold-wash: rgba(218,160,48,.04);
        --gold-fg: #13100C;

        --red: #D4604F;
        --red-pale: rgba(212,96,79,.12);
        --green: #5EAA80;
        --green-pale: rgba(94,170,128,.1);
        --green-bright: #6CC496;
        --blue: #6A9FD0;
        --blue-pale: rgba(106,159,208,.1);
        --purple: #9A84CC;
        --purple-pale: rgba(154,132,204,.1);

        --money: #DAA030;
        --color-money: #DAA030;

        --success-bg: rgba(94,170,128,.1);
        --success-border: rgba(94,170,128,.25);
        --success-text: #6CC496;

        --warning-bg: rgba(218,160,48,.1);
        --warning-border: rgba(218,160,48,.25);
        --warning-text: #E8B240;

        --error-bg: rgba(212,96,79,.12);
        --error-border: rgba(212,96,79,.25);
        --error-text: #F0A090;

        --info-bg: rgba(106,159,208,.1);
        --info-border: rgba(106,159,208,.25);
        --info-text: #8FBFE0;

        --overlay-bg: rgba(0, 0, 0, 0.7);
        --overlay-backdrop: rgba(0, 0, 0, 0.6);

        --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
        --shadow: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15);
        --shadow-md: 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.2);
        --shadow-lg: 0 4px 8px rgba(0,0,0,.2), 0 16px 40px rgba(0,0,0,.25);
        --shadow-xl: 0 8px 16px rgba(0,0,0,.25), 0 24px 48px rgba(0,0,0,.3);
        --shadow-gold: 0 0 0 1px rgba(218,160,48,.08), 0 4px 16px rgba(218,160,48,.05);
        --shadow-card-hover: 0 2px 4px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.25);

        --hero-grad: linear-gradient(178deg,
            rgba(19,16,12,.1) 0%,
            rgba(19,16,12,.35) 30%,
            rgba(19,16,12,.7) 55%,
            rgba(19,16,12,.94) 78%,
            rgba(19,16,12,1) 100%);
        --hero-text: #E2D8C8;
        --hero-sub: #B5A890;
        --hero-pill-bg: rgba(29,25,20,.78);
        --hero-pill-text: #E2D8C8;
        --hero-pill-border: 1px solid rgba(46,40,31,.8);
        --hero-level: #7E7264;
        --hero-sprite: drop-shadow(0 3px 8px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(218,160,48,.05));

        --page-glow: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(218,160,48,.03) 0%, transparent 70%);
    }
}

/* --- Dark theme: manual override --- */
[data-theme="dark"] {
    --bg-page: #13100C;
    --bg-surface: #1D1914;
    --bg-surface-alt: #221E17;
    --bg-nav: #0C0A08;
    --bg-nav-2: #13100C;
    --bg-nav-hover: rgba(255,255,255,.04);
    --bg-nav-active: rgba(212,164,60,.1);
    --bg-muted: #272119;
    --bg-inset: #1A1610;
    --bg-sidebar: var(--bg-surface-alt);

    --text-primary: #E2D8C8;
    --text-secondary: #B5A890;
    --text-muted: #7E7264;
    --text-tertiary: #7E7264;
    --text-on-nav: #8A7E6E;
    --text-on-nav-hover: #C0B4A2;
    --text-on-nav-active: #D4A43C;

    --border: #352E24;
    --border-subtle: #2C261D;
    --border-strong: #453C30;

    --gold: #DAA030;
    --gold-bright: #E8B240;
    --gold-pale: rgba(218,160,48,.11);
    --gold-wash: rgba(218,160,48,.04);
    --gold-fg: #13100C;

    --red: #D4604F;
    --red-pale: rgba(212,96,79,.12);
    --green: #5EAA80;
    --green-pale: rgba(94,170,128,.1);
    --green-bright: #6CC496;
    --blue: #6A9FD0;
    --blue-pale: rgba(106,159,208,.1);
    --purple: #9A84CC;
    --purple-pale: rgba(154,132,204,.1);

    --money: #DAA030;
    --color-money: #DAA030;

    --success-bg: rgba(94,170,128,.1);
    --success-border: rgba(94,170,128,.25);
    --success-text: #6CC496;

    --warning-bg: rgba(218,160,48,.1);
    --warning-border: rgba(218,160,48,.25);
    --warning-text: #E8B240;

    --error-bg: rgba(212,96,79,.12);
    --error-border: rgba(212,96,79,.25);
    --error-text: #F0A090;

    --info-bg: rgba(106,159,208,.1);
    --info-border: rgba(106,159,208,.25);
    --info-text: #8FBFE0;

    --overlay-bg: rgba(0, 0, 0, 0.7);
    --overlay-backdrop: rgba(0, 0, 0, 0.6);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
    --shadow: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15);
    --shadow-md: 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.2);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.2), 0 16px 40px rgba(0,0,0,.25);
    --shadow-xl: 0 8px 16px rgba(0,0,0,.25), 0 24px 48px rgba(0,0,0,.3);
    --shadow-gold: 0 0 0 1px rgba(218,160,48,.08), 0 4px 16px rgba(218,160,48,.05);
    --shadow-card-hover: 0 2px 4px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.25);

    --hero-grad: linear-gradient(178deg,
        rgba(19,16,12,.1) 0%,
        rgba(19,16,12,.35) 30%,
        rgba(19,16,12,.7) 55%,
        rgba(19,16,12,.94) 78%,
        rgba(19,16,12,1) 100%);
    --hero-text: #E2D8C8;
    --hero-sub: #B5A890;
    --hero-pill-bg: rgba(29,25,20,.78);
    --hero-pill-text: #E2D8C8;
    --hero-pill-border: 1px solid rgba(46,40,31,.8);
    --hero-level: #7E7264;
    --hero-sprite: drop-shadow(0 3px 8px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(218,160,48,.05));

    --page-glow: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(218,160,48,.03) 0%, transparent 70%);
}