/**
 * 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;
    --text-on-gold: #1A1A1A;

    /* --- Client (^RRGGBB) text: readable OKLCH lightness band ---
       Game descriptions carry the client's own colors, picked for the
       client's light parchment tooltip. .ro-client-color clamps lightness
       into this band so hue and chroma survive but contrast holds. On this
       surface only the too-light end needs capping. */
    --ro-l-min: 0;
    --ro-l-max: 0.45;

    /* --- 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);

    /* --- Backward-compat aliases (shorthand) --- */
    --text: var(--text-primary);
    --bg-input: var(--bg-surface);
    --link: var(--gold);
    --danger: var(--destructive);

    /* --- 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;

    /* --- Heatmap (magma ramp) --- */
    --heat-1: #8C1E46;
    --heat-2: #D25020;
    --heat-3: #F5A014;
    --heat-4: #FFE650;

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

    /* --- Map dots (fixed: drawn on the theme-invariant minimap PNG, so NOT
       themed — the legend, the map-detail overlay, and the NPC route
       thumbnails all share these) --- */
    --map-dot-warp: #fc0404;
    --map-dot-shop: #2ecc71;
    --map-dot-npc: #4a90d9;
    --map-dot-spawn: #1abc9c;
    --map-dot-boss: #f39c12;

    /* --- 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%);

    /* --- Rank medals (leaderboards, rankings) --- */
    --rank-1-bg: #FBBF24;
    --rank-1-fg: #78350F;
    --rank-2-bg: #D1D5DB;
    --rank-2-fg: #374151;
    --rank-3-bg: #B45309;
    --rank-3-fg: #FFF;

    --rank-gold-start: #FBBF24;
    --rank-gold-end: #F59E0B;
    --rank-gold-fg: #1A1A2E;
    --rank-silver-start: #CBD5E1;
    --rank-silver-end: #94A3B8;
    --rank-silver-fg: #1A1A2E;
    --rank-bronze-start: #B45309;
    --rank-bronze-end: #92400E;
    --rank-bronze-fg: #FFF;

    /* .rank-badge.rank-N compound medals (dashboard/battle) — brighter light
       palette than .rank-gold et al., same muted family in dark */
    --rank-badge-1-start: #FFD700;
    --rank-badge-1-end: #FFB800;
    --rank-badge-1-fg: #000;
    --rank-badge-2-start: #C0C0C0;
    --rank-badge-2-end: #A0A0A0;
    --rank-badge-2-fg: #000;
    --rank-badge-3-start: #B45309;
    --rank-badge-3-end: #92400E;
    --rank-badge-3-fg: #FFF;

    /* --- Callout tints (mechanics/guide prose) --- */
    --callout-warning-bg: #FEF2F2;
    --callout-tip-bg: #F0FDF4;

    /* --- 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;
        --text-on-gold: #1A1A1A;

        /* Client text: floor the lightness instead (see :root) */
        --ro-l-min: 0.72;
        --ro-l-max: 1;

        --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;

        --heat-1: #A83060;
        --heat-2: #E06830;
        --heat-3: #F5B830;
        --heat-4: #FFE870;

        --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%);

        /* --- Rank medals (leaderboards, rankings) --- */
        --rank-1-bg: #3D3520;
        --rank-1-fg: #F0C860;
        --rank-2-bg: #2E3138;
        --rank-2-fg: #D6DCE4;
        --rank-3-bg: #33220F;
        --rank-3-fg: #E0A468;

        --rank-gold-start: #3D3520;
        --rank-gold-end: #2A2510;
        --rank-gold-fg: #F0C860;
        --rank-silver-start: #2E3138;
        --rank-silver-end: #1F2228;
        --rank-silver-fg: #D6DCE4;
        --rank-bronze-start: #33220F;
        --rank-bronze-end: #241708;
        --rank-bronze-fg: #E0A468;

        --rank-badge-1-start: #3D3520;
        --rank-badge-1-end: #2A2510;
        --rank-badge-1-fg: #F0C860;
        --rank-badge-2-start: #2E3138;
        --rank-badge-2-end: #1F2228;
        --rank-badge-2-fg: #D6DCE4;
        --rank-badge-3-start: #33220F;
        --rank-badge-3-end: #241708;
        --rank-badge-3-fg: #E0A468;

        /* --- Callout tints (mechanics/guide prose) --- */
        --callout-warning-bg: rgba(185, 28, 28, 0.1);
        --callout-tip-bg: rgba(21, 128, 61, 0.1);

        /* --- Backward-compat aliases (shorthand) --- */
        --text: var(--text-primary);
        --bg-input: var(--bg-surface);
        --link: var(--gold);
        --danger: var(--destructive);
    }
}

/* --- 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;
    --text-on-gold: #1A1A1A;

    /* Client text: floor the lightness instead (see :root) */
    --ro-l-min: 0.72;
    --ro-l-max: 1;

    --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;

    --heat-1: #A83060;
    --heat-2: #E06830;
    --heat-3: #F5B830;
    --heat-4: #FFE870;

    --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%);

    /* --- Rank medals (leaderboards, rankings) --- */
    --rank-1-bg: #3D3520;
    --rank-1-fg: #F0C860;
    --rank-2-bg: #2E3138;
    --rank-2-fg: #D6DCE4;
    --rank-3-bg: #33220F;
    --rank-3-fg: #E0A468;

    --rank-gold-start: #3D3520;
    --rank-gold-end: #2A2510;
    --rank-gold-fg: #F0C860;
    --rank-silver-start: #2E3138;
    --rank-silver-end: #1F2228;
    --rank-silver-fg: #D6DCE4;
    --rank-bronze-start: #33220F;
    --rank-bronze-end: #241708;
    --rank-bronze-fg: #E0A468;

    --rank-badge-1-start: #3D3520;
    --rank-badge-1-end: #2A2510;
    --rank-badge-1-fg: #F0C860;
    --rank-badge-2-start: #2E3138;
    --rank-badge-2-end: #1F2228;
    --rank-badge-2-fg: #D6DCE4;
    --rank-badge-3-start: #33220F;
    --rank-badge-3-end: #241708;
    --rank-badge-3-fg: #E0A468;

    /* --- Callout tints (mechanics/guide prose) --- */
    --callout-warning-bg: rgba(185, 28, 28, 0.1);
    --callout-tip-bg: rgba(21, 128, 61, 0.1);

    /* --- Backward-compat aliases (shorthand) --- */
    --text: var(--text-primary);
    --bg-input: var(--bg-surface);
    --link: var(--gold);
    --danger: var(--destructive);
}