/* =============================================
   Grail Den — Unified Design Tokens
   Single source of truth for all surfaces.
   ============================================= */

:root {
    /* === Brand — The Metals === */
    --amber: #D4812A;
    --amber-light: #E09B4E;
    --amber-dark: #B06B1F;
    --gold: #C9A84C;
    --gold-light: #D4BA6E;
    --gold-dark: #A88B3C;
    --iron: #8B9CAF;

    /* === Stone Palette === */
    --stone-900: #0C0C0E;
    --stone-800: #141418;
    --stone-700: #1C1C22;
    --stone-600: #252530;
    --stone-500: #353540;
    --stone-400: #605850;
    --stone-300: #8B8580;
    --stone-200: #A09890;
    --stone-100: #C8C0B4;

    /* === Parchment Palette === */
    --parchment: #E8E0D4;
    --parchment-dark: #C8C0B4;
    --parchment-light: #FAF7F3;
    --parchment-white: #FDFAF5;
    --parchment-mid: #F0EAE3;

    /* === Semantic — The Signals === */
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #EF4444;
    --info: #60A5FA;
    --bounty: #34D399;
    --caution: #FBBF24;
    --intel: #60A5FA;

    /* === Typography === */
    --font-display: 'Cinzel', 'Palatino', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    --text-xs: 11px;  --text-sm: 13px;  --text-base: 15px;
    --text-lg: 17px;  --text-xl: 20px;  --text-2xl: 24px;
    --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px;

    /* === Spacing — 4px base === */
    --space-xs: 4px;   --space-sm: 8px;   --space-md: 12px;
    --space-lg: 16px;  --space-xl: 24px;  --space-2xl: 48px;
    --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;
    --space-16: 64px;
    --space-xxl: 32px;

    /* === Radius === */
    --radius-sm: 6px;   --radius-md: 8px;  --radius: 10px;
    --radius-lg: 16px;  --radius-xl: 16px; --radius-full: 9999px;

    /* === Layout === */
    --nav-height: 48px;
    --transition: 0.2s ease;
    --transition-spring: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =============================================
   Dark Theme (DEFAULT)
   ============================================= */
[data-theme="dark"], :root {
    /* --- tokens.css aliases (bg-0 .. bg-3, text-1 .. text-3) --- */
    --bg-0: var(--stone-900);
    --bg-1: var(--stone-800);
    --bg-2: var(--stone-700);
    --bg-3: var(--stone-600);
    --surface: #2D2D38;
    --text-1: var(--parchment);
    --text-2: var(--stone-200);
    --text-3: var(--stone-400);

    /* --- app.css aliases (bg-deep, bg-surface, etc.) --- */
    --bg-deep: var(--stone-900);
    --bg-surface: var(--stone-800);
    --bg-elevated: var(--stone-700);
    --bg-surface-hover: var(--stone-600);
    --bg-card: var(--stone-800);
    --text-primary: var(--parchment);
    --text-secondary: var(--stone-200);
    --text-muted: var(--stone-400);
    --accent: var(--amber);
    --accent-hover: var(--amber-light);
    --accent-dim: rgba(212, 129, 42, 0.1);
    --accent-glow: rgba(212, 129, 42, 0.3);

    /* Borders */
    --border: rgba(232, 224, 212, 0.05);
    --border-light: rgba(232, 224, 212, 0.03);
    --border-hover: rgba(232, 224, 212, 0.1);

    /* Status */
    --error: #EF4444;

    /* Special */
    --streak: #FF4500;
    --pro: #3B82F6;
    --super-admin: var(--amber);

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(212,129,42,0.15);
    --glow-accent: 0 0 8px rgba(212, 129, 42, 0.3);
}

/* =============================================
   Light Theme
   ============================================= */
[data-theme="light"] {
    /* --- tokens.css aliases --- */
    --bg-0: #FAF7F3;
    --bg-1: #FDFAF5;
    --bg-2: #F0EAE3;
    --bg-3: #E8E0D8;
    --surface: #FDFAF5;
    --text-1: #2C2520;
    --text-2: #6B5F55;
    --text-3: #998E84;

    /* --- app.css aliases --- */
    --bg-deep: #FAF7F3;
    --bg-surface: #FDFAF5;
    --bg-elevated: #F0EAE3;
    --bg-surface-hover: #E8E0D8;
    --bg-card: #FDFAF5;
    --text-primary: #2C2520;
    --text-secondary: #6B5F55;
    --text-muted: #998E84;
    --accent: var(--amber);
    --accent-hover: var(--amber-dark);
    --accent-dim: rgba(212, 129, 42, 0.08);
    --accent-glow: rgba(212, 129, 42, 0.12);

    /* Borders */
    --border: rgba(44, 37, 32, 0.08);
    --border-light: rgba(44, 37, 32, 0.04);
    --border-hover: rgba(44, 37, 32, 0.15);

    /* Status — deeper for light bg */
    --success: #059669;
    --error: #DC2626;
    --warning: #D97706;
    --info: #2563EB;
    --bounty: #059669;
    --caution: #D97706;
    --danger: #DC2626;
    --intel: #2563EB;

    /* Special */
    --gold: #C9A84C;
    --super-admin: var(--amber);

    /* Shadows */
    --shadow: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 20px rgba(212,129,42,0.08);
    --glow-accent: 0 0 8px rgba(212, 129, 42, 0.08);
}