/* =====================================================================
   Khan Origin — Design Tokens
   ---------------------------------------------------------------------
   Single source of truth for colour, type, space, radius, elevation.

   ARCHITECTURE
   1. Primitives      raw palette ramps. Never used directly by components.
   2. Semantic        role-based tokens (surface / content / border / brand).
                      BOTH themes assign the SAME names, so a component that
                      reads var(--c-surface-2) is automatically themed.
   3. Legacy aliases  older token sets (--ui-*, --lux-*, --product-*, --gold,
                      --text*) remapped onto the semantic layer so existing
                      rules keep working while they are migrated.

   RULE: components must read semantic tokens only. If you need a new colour,
   add a semantic token here rather than hardcoding a hex in a component.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. PRIMITIVES — Vietnam 2/9 Red & Royal Gold Palette
   --------------------------------------------------------------------- */
:root {
    /* Crimson Velvet & Vietnamese Red — deep regal surfaces */
    --p-crimson-950: #0d0103;
    --p-crimson-900: #150205;
    --p-crimson-850: #23050a;
    --p-crimson-800: #31070e;
    --p-crimson-700: #430a13;
    --p-crimson-600: #5c0e1a;
    --p-crimson-500: #991b1b;
    --p-crimson-400: #b91c1c;
    --p-crimson-300: #dc2626;
    --p-crimson-200: #ef4444;
    --p-crimson-100: #f87171;

    /* Slate neutral for sub-elements */
    --p-slate-950: #0d0103;
    --p-slate-900: #150205;
    --p-slate-850: #23050a;
    --p-slate-800: #31070e;
    --p-slate-700: #430a13;
    --p-slate-600: #5c0e1a;
    --p-slate-500: #94a3b8;
    --p-slate-400: #cbd5e1;
    --p-slate-300: #e2e8f0;
    --p-slate-200: #f1f5f9;
    --p-slate-100: #ffffff;

    /* Paper — warm celebratory neutral */
    --p-paper-50: #ffffff;
    --p-paper-100: #fffdfa;
    --p-paper-200: #fef2f2;
    --p-paper-300: #fee2e2;
    --p-paper-600: #5c0e1a;
    --p-paper-800: #23050a;
    --p-paper-900: #0d0103;

    /* Gold — Star of Vietnam & Royal Bronze Drum (Trống Đồng) */
    --p-gold-100: #fffdf0;
    --p-gold-200: #fffbeb;
    --p-gold-300: #fef08a;
    --p-gold-400: #fde047;
    --p-gold-500: #facc15;
    --p-gold-600: #f59e0b;
    --p-gold-700: #d97706;

    /* Ember / Red Accent */
    --p-ember-500: #dc2626;
    --p-ember-600: #b91c1c;
    --p-ember-700: #991b1b;

    /* Azure — auxiliary luminous accent */
    --p-azure-300: #fef08a;
    --p-azure-400: #fde047;
    --p-azure-500: #facc15;
    --p-azure-600: #f59e0b;
    --p-azure-700: #d97706;

    /* State ramps */
    --p-green-400: #4ade80;
    --p-green-600: #16a34a;
    --p-amber-400: #fde047;
    --p-amber-600: #d97706;
    --p-red-400: #f87171;
    --p-red-600: #dc2626;
    --p-cyan-400: #38bdf8;
    --p-cyan-600: #0284c7;
    --p-purple-400: #f472b6;
    --p-purple-600: #db2777;
    --p-pink-400: #fb7185;
    --p-pink-600: #e11d48;
}

/* ---------------------------------------------------------------------
   2. SEMANTIC — VIETNAM 2/9 LUXURY NATIONAL THEME (Unified Theme)
   --------------------------------------------------------------------- */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
    color-scheme: dark;

    /* Surfaces — Comfortable Luminous Warm Slate-Burgundy */
    --c-bg: #1c1417;
    --c-bg-sunken: #140d0f;
    --c-surface-1: #2a1e23;
    --c-surface-2: #38292f;
    --c-surface-3: #4a373e;
    --c-surface-inset: rgba(250, 204, 21, 0.08);

    /* Translucent panel — ruby crystal glass with gold glow */
    --c-panel: rgba(38, 26, 31, 0.90);
    --c-panel-strong: rgba(48, 33, 39, 0.98);

    /* Content — ultra-crisp pure white & warm gold text (WCAG AAA) */
    --c-text: #ffffff;
    --c-text-secondary: #fef08a;
    --c-text-muted: #e2e8f0;
    --c-text-faint: #cbd5e1;
    --c-text-on-brand: #0d0103;

    /* Borders — luminous gold & ruby edges */
    --c-border: rgba(250, 204, 21, 0.28);
    --c-border-strong: rgba(250, 204, 21, 0.50);
    --c-border-brand: rgba(250, 204, 21, 0.75);

    /* Brand — Golden Star & National Red */
    --c-brand: #fbbf24;
    --c-brand-hover: #fde047;
    --c-brand-muted: rgba(251, 191, 36, 0.22);
    --c-brand-ring: rgba(251, 191, 36, 0.65);
    --c-accent: #ef4444;
    --c-accent-muted: rgba(239, 68, 68, 0.25);

    /* State */
    --c-success: var(--p-green-400);
    --c-warning: var(--p-amber-400);
    --c-danger: var(--p-red-400);
    --c-info: #facc15;
    --c-success-bg: rgba(74, 222, 128, 0.18);
    --c-warning-bg: rgba(253, 224, 71, 0.18);
    --c-danger-bg: rgba(248, 113, 113, 0.18);
    --c-info-bg: rgba(250, 204, 21, 0.18);

    /* Elevation — dramatic crimson & gold aura shadows */
    --c-shadow-sm: 0 2px 10px rgba(13, 1, 3, 0.5);
    --c-shadow-md: 0 12px 36px rgba(13, 1, 3, 0.65);
    --c-shadow-lg: 0 28px 75px rgba(13, 1, 3, 0.8), 0 0 35px rgba(220, 38, 38, 0.2);

    /* Page backdrop — Comfortable Warm Atmospheric Depth */
    --c-backdrop:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(185, 28, 28, 0.25), transparent 60%),
        radial-gradient(ellipse 70% 50% at 85% 20%, rgba(245, 158, 11, 0.16), transparent 50%),
        radial-gradient(ellipse 80% 60% at 15% 75%, rgba(153, 27, 27, 0.18), transparent 55%),
        radial-gradient(ellipse 60% 40% at 75% 90%, rgba(245, 158, 11, 0.12), transparent 50%),
        linear-gradient(180deg, #25191d 0%, #1c1417 45%, #140d0f 100%);

    /* Scrim behind modals */
    --c-scrim: rgba(10, 1, 3, 0.88);
}

/* ---------------------------------------------------------------------
   3. NON-COLOUR TOKENS — shared by both themes
   --------------------------------------------------------------------- */
:root {
    /* Type families — 100% Vietnamese Diacritics Supported */
    --font-sans: "Be Vietnam Pro", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Be Vietnam Pro", Georgia, serif;
    --font-display: "Montserrat", "Be Vietnam Pro", "Plus Jakarta Sans", sans-serif;
    --font-ui: "Be Vietnam Pro", "Plus Jakarta Sans", "Outfit", sans-serif;

    /* Fluid type scale — 1.200 minor third, clamped 360px → 1440px */
    --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
    --text-sm: clamp(0.85rem, 0.82rem + 0.16vw, 0.94rem);
    --text-base: clamp(0.96rem, 0.92rem + 0.22vw, 1.08rem);
    --text-lg: clamp(1.12rem, 1.05rem + 0.32vw, 1.30rem);
    --text-xl: clamp(1.30rem, 1.20rem + 0.50vw, 1.62rem);
    --text-2xl: clamp(1.55rem, 1.38rem + 0.85vw, 2.12rem);
    --text-3xl: clamp(1.90rem, 1.60rem + 1.40vw, 2.85rem);
    --text-4xl: clamp(2.30rem, 1.85rem + 2.20vw, 3.90rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.14em;

    /* Space scale — 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Fluid section rhythm */
    --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
    --space-gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);

    /* Radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;

    /* Layout */
    --header-h: 4.5rem;
    --container: 74rem;
    --container-wide: 82.5rem;
    --container-narrow: 46rem;

    /* Focus ring — themed, consistent everywhere */
    --focus-ring: 0 0 0 3px var(--c-brand-ring);
    --focus-ring-offset: 0 0 0 2px var(--c-bg), 0 0 0 5px var(--c-brand-ring);

    /* Z-index scale — named so stacking is auditable */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
}

/* ---------------------------------------------------------------------
   4. LEGACY ALIASES
   Older stylesheets reference these names directly. Mapping them onto the
   semantic layer makes those rules theme-aware for free.
   Do not use these in new code.
   --------------------------------------------------------------------- */
:root {
    /* --ui-* (ui-system.css) */
    --ui-bg: var(--c-bg);
    --ui-bg-elevated: var(--c-surface-1);
    --ui-surface: var(--c-surface-1);
    --ui-surface-2: var(--c-surface-2);
    --ui-surface-3: var(--c-surface-3);
    --ui-text: var(--c-text);
    --ui-text-soft: var(--c-text-secondary);
    --ui-muted: var(--c-text-secondary);
    --ui-border: var(--c-border);
    --ui-border-strong: var(--c-border-brand);
    --ui-primary: var(--c-brand);
    --ui-primary-strong: var(--c-brand-hover);
    --ui-primary-ink: var(--c-text-on-brand);
    --ui-secondary: var(--c-accent);
    --ui-success: var(--c-success);
    --ui-warning: var(--c-warning);
    --ui-danger: var(--c-danger);
    --ui-info: var(--c-info);
    --ui-space-1: var(--space-1);
    --ui-space-2: var(--space-2);
    --ui-space-3: var(--space-3);
    --ui-space-4: var(--space-4);
    --ui-space-5: var(--space-5);
    --ui-space-6: var(--space-6);
    --ui-space-8: var(--space-8);
    --ui-space-10: var(--space-10);
    --ui-space-12: var(--space-12);
    --ui-space-16: var(--space-16);
    --ui-space-20: var(--space-20);
    --ui-radius-sm: var(--radius-sm);
    --ui-radius-md: var(--radius-md);
    --ui-radius-lg: var(--radius-lg);
    --ui-radius-xl: var(--radius-xl);
    --ui-radius-pill: var(--radius-pill);
    --ui-shadow-sm: var(--c-shadow-sm);
    --ui-shadow-md: var(--c-shadow-md);
    --ui-shadow-lg: var(--c-shadow-lg);
    --ui-focus-ring: var(--focus-ring);
    --ui-ease: var(--ease-out);
    --ui-fast: var(--dur-fast);
    --ui-base: var(--dur-base);
    --ui-slow: var(--dur-slow);
    --ui-header-height: var(--header-h);
    --ui-container: var(--container);
    --ui-container-wide: var(--container-wide);

    /* --lux-* (ui-premium.css) */
    --lux-bg: var(--c-bg);
    --lux-bg-soft: var(--c-surface-1);
    --lux-panel: var(--c-panel);
    --lux-panel-strong: var(--c-panel-strong);
    --lux-line: var(--c-border);
    --lux-line-strong: var(--c-border-strong);
    --lux-gold: var(--c-brand);
    --lux-gold-bright: var(--c-brand-hover);
    --lux-blue: var(--c-accent);
    --lux-blue-bright: var(--c-accent);
    --lux-ivory: var(--c-text);
    --lux-copy: var(--c-text-secondary);
    --lux-shadow: var(--c-shadow-lg);

    /* --product-* (premium homepage) */
    --product-paper: var(--c-bg);
    --product-white: var(--c-surface-2);
    --product-ink: var(--c-text);
    --product-muted: var(--c-text-secondary);
    --product-line: var(--c-border);
    --product-brand: var(--c-brand);
    --product-brand-dark: var(--c-brand-hover);
    --product-accent: var(--c-brand);

    /* --light-* (formerly the mis-named "light" block) */
    --light-bg: var(--c-bg);
    --light-bg-soft: var(--c-surface-1);
    --light-surface: var(--c-surface-1);
    --light-surface-warm: var(--c-surface-2);
    --light-text: var(--c-text);
    --light-copy: var(--c-text-secondary);
    --light-muted: var(--c-text-muted);
    --light-line: var(--c-border);
    --light-line-strong: var(--c-border-strong);
    --light-gold: var(--c-brand);
    --light-gold-bright: var(--c-brand-hover);
    --light-shadow: var(--c-shadow-lg);

    /* main.css globals */
    --gold: var(--c-brand);
    --gold-light: var(--c-brand-hover);
    --gold-dim: var(--p-gold-600);
    --gold-glow: var(--c-brand-muted);
    --gold-glow-strong: var(--c-brand-ring);
    --bg-dark: var(--c-bg);
    --bg-surface: var(--c-surface-1);
    --bg-card: var(--c-surface-1);
    --bg-card-hover: var(--c-surface-2);
    --border: var(--c-border);
    --border-gold: var(--c-border-brand);
    --border-gold-hover: var(--c-brand-ring);
    --border-blue: var(--c-accent-muted);
    --border-blue-hover: var(--c-accent);
    --border-cyan: var(--c-info-bg);
    --glass: var(--c-surface-inset);
    --glass-bg: var(--c-panel);
    --glass-border: var(--c-border);
    --glass-gold: var(--c-brand-muted);
    --glass-blue: var(--c-accent-muted);
    --text: var(--c-text);
    --text-main: var(--c-text);
    --text-primary: var(--c-text);
    --text-secondary: var(--c-text-secondary);
    --text-dim: var(--c-text-secondary);
    --text-muted: var(--c-text-muted);
    --primary: var(--c-brand);
    --primary-glow: var(--c-brand-muted);
    --secondary: var(--c-accent);
    --surface: var(--c-surface-1);
    --success: var(--c-success);
    --danger: var(--c-danger);
    --accent-blue: var(--c-accent);
    --accent-sapphire: var(--p-azure-400);
    --accent-cobalt: var(--p-azure-600);
    --accent-green: var(--c-success);
    --accent-red: var(--c-danger);
    --accent-orange: var(--c-warning);
    --accent-cyan: var(--c-info);
    --accent-purple: var(--p-purple-400);
    --accent-pink: var(--p-pink-400);
    --blue-glow: var(--c-accent-muted);
    --blue-glow-strong: var(--c-accent);
    --cyan-glow: var(--c-info-bg);
    --purple-glow: rgba(192, 132, 252, 0.25);
    --radius: var(--radius-lg);
    --radius-lg: var(--radius-xl);
    --font-body: var(--font-sans);
    --font-ui: var(--font-ui);
    --font-display: var(--font-display);
}

/* Event category colours — theme-aware so calendar chips stay legible */
:root,
:root[data-theme="dark"] {
    --evt-cashbonus: var(--p-green-400);
    --evt-mobpop: var(--p-cyan-400);
    --evt-droprate: #fb923c;
    --evt-kibonus: var(--p-purple-400);
    --evt-maintenance: var(--p-red-400);
    --evt-boss: var(--p-amber-400);
    --evt-pvp: var(--p-pink-400);
    --evt-default: var(--p-slate-400);
}

:root[data-theme="light"] {
    --evt-cashbonus: var(--p-green-600);
    --evt-mobpop: var(--p-cyan-600);
    --evt-droprate: #c2410c;
    --evt-kibonus: var(--p-purple-600);
    --evt-maintenance: var(--p-red-600);
    --evt-boss: var(--p-amber-600);
    --evt-pvp: var(--p-pink-600);
    --evt-default: var(--p-slate-500);
}

/* ---------------------------------------------------------------------
   5. BASE — minimal, token-driven
   --------------------------------------------------------------------- */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
    background: var(--c-bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    color: var(--c-text);
    background: var(--c-backdrop) fixed;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Theme change should feel deliberate, not jarring */
    transition: background-color var(--dur-slow) var(--ease-out),
        color var(--dur-slow) var(--ease-out);
}

/* Accessible focus — visible on both themes, never removed */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Respect the OS reduced-motion setting */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Themed scrollbar */
* {
    scrollbar-color: var(--c-border-strong) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--c-bg-sunken);
}

::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border: 2px solid var(--c-bg-sunken);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-brand);
}

::selection {
    color: var(--c-text-on-brand);
    background: var(--c-brand);
}