/* ============================================================
   LUMICHESS DESIGN TOKENS
   Single source of truth for the entire visual system.
   Every page imports this first.
   ============================================================ */

:root {
    /* ── Brand Colors: Amber/Gold ────────────────────────────
       Desaturated ~20% from pure amber for dark-mode comfort.
       PMC 2024 study: yellow/amber causes LEAST visual fatigue
       of all colors on dark backgrounds. ──────────────────── */
    --lumi-amber-50:  #FDF6E3;
    --lumi-amber-100: #F5E6C0;
    --lumi-amber-200: #E8C06A;
    --lumi-amber-300: #E0B35A;
    --lumi-amber-400: #D4A44B;
    --lumi-amber-500: #C8963C;
    --lumi-amber-600: #A67B2E;
    --lumi-amber-700: #8A6524;
    --lumi-amber-800: #6B4E1A;
    --lumi-amber-900: #4D3812;

    /* ── Semantic Colors ─────────────────────────────────────
       All desaturated ~20% from full saturation.
       Saturated colors "vibrate" on dark surfaces and cause
       eye strain during 30+ minute sessions (Atmos Style).
       Red especially: PMC study found it causes worst
       visual fatigue — lowest blink rate, worst cognition. ── */
    --lumi-accent:       var(--lumi-amber-400);
    --lumi-accent-hover: var(--lumi-amber-300);
    --lumi-accent-muted: var(--lumi-amber-600);
    --lumi-accent-text:  #141312;

    --lumi-success: #5DB67D;   /* desaturated green — correct moves */
    --lumi-error:   #CF6E6E;   /* desaturated coral — wrong moves, blunders */
    --lumi-warning: #D4A44B;   /* amber — merges with accent */
    --lumi-info:    #6B9FD4;   /* desaturated blue — hints, annotations */

    /* ── Surface Colors ──────────────────────────────────────
       Premium dark palette — warm-tinted (Sand/Stone family).
       nav(8%) → body(10%) → surface(14%) → card(17%) → elevated(20%)
       Lighter = higher elevation (Material Design 3 principle).
       Warm R>G>B tint coheres with amber accent family.
       Body at 10% matches Spotify/Carbon sweet spot (7-10%).
       Card-to-body contrast ~1.3:1 (subtle, premium feel).
       (Radix Sand + Tailwind Stone + Material Design research) ── */
    --lumi-bg-nav:      #262522;   /* warm dark — sidebar (matches Chess.com's effective nav) */
    --lumi-bg-body:     #302E2B;   /* warm coffee-brown body (Chess.com home parity) */
    --lumi-bg-surface:  #3A3835;   /* surfaces between body and cards */
    --lumi-bg-card:     #3F3D3A;   /* lifted cards, components */
    --lumi-bg-elevated: #494643;   /* modals, dropdowns */
    --lumi-bg-input:    rgba(255,255,255,0.05);

    /* ── Text Colors ─────────────────────────────────────────
       Off-white body text at ~14:1 contrast vs body (#1c1a18).
       Pure white OK for headings; off-white for body prevents
       halation that affects ~33% with astigmatism.
       Warm tint coheres with amber accent family. ─────────── */
    --lumi-text-primary:   #F0EDE8;   /* warm off-white — headings, important text */
    --lumi-text-secondary: #E8E4E0;   /* ~13:1 — body text, labels, readable content */
    --lumi-text-muted:     #E2DFDA;   /* ~12.5:1 — captions, meta, coaching commentary */
    --lumi-text-dim:       #E0DCD7;   /* ~12:1 — tertiary text, subtle labels */
    --lumi-text-ghost:     #3A3836;   /* ~1.5:1 — barely visible dividers */

    /* ── Borders ─────────────────────────────────────────────
       RGBA white at low opacity auto-adapts to any surface. ─ */
    --lumi-border:       rgba(255,255,255,0.04);
    --lumi-border-hover: rgba(255,255,255,0.08);
    --lumi-border-focus: rgba(212,164,75,0.35);

    /* ── Board Colors ────────────────────────────────────────
       Warm cream + espresso. Research-validated: natural wood
       tones with moderate contrast are optimal for 30+ min
       sessions. FIDE-approved color family. ──────────────── */
    --lumi-board-light: #F5E6C8;
    --lumi-board-dark:  #A67B4B;

    /* ── Glow Effects ───────────────────────────────────────
       Reduced intensity from original. Glow helps on CTAs
       and active states, but hurts when too bright or broad.
       Using desaturated amber in glow to match new accent. ── */
    --lumi-glow-sm:  0 0 12px rgba(212,164,75,0.08);
    --lumi-glow-md:  0 0 20px rgba(212,164,75,0.1);
    --lumi-glow-lg:  0 0 40px rgba(212,164,75,0.08);
    --lumi-glow-btn: 0 2px 12px rgba(212,164,75,0.15);

    /* ── Shadows (warm-tinted) ────────────────────────────── */
    --lumi-shadow-card:  0 1px 4px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
    --lumi-shadow-board: 0 4px 24px rgba(0,0,0,0.5);
    --lumi-shadow-modal: 0 24px 64px rgba(0,0,0,0.6);

    /* ── Typography ──────────────────────────────────────────
       Dark mode: increase weight slightly (thin fonts appear
       less distinct on dark backgrounds). Body at 1.6 line-height
       prevents wall-of-text effect in extended sessions. ──── */
    --lumi-font:      'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    --lumi-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

    /* ── Type Scale ────────────────────────────────────────── */
    --lumi-text-xs:   11px;
    --lumi-text-sm:   13px;
    --lumi-text-base: 15px;
    --lumi-text-md:   15px;
    --lumi-text-lg:   17px;
    --lumi-text-xl:   20px;
    --lumi-text-2xl:  24px;
    --lumi-text-3xl:  32px;
    --lumi-text-4xl:  40px;

    /* ── Spacing (8px base grid) ──────────────────────────── */
    --lumi-space-1:  4px;
    --lumi-space-2:  8px;
    --lumi-space-3:  12px;
    --lumi-space-4:  16px;
    --lumi-space-5:  20px;
    --lumi-space-6:  24px;
    --lumi-space-8:  32px;
    --lumi-space-10: 40px;
    --lumi-space-12: 48px;
    --lumi-space-16: 64px;

    /* ── Radius ────────────────────────────────────────────── */
    --lumi-radius-xs:   4px;
    --lumi-radius-sm:   6px;
    --lumi-radius-md:   10px;
    --lumi-radius-lg:   14px;
    --lumi-radius-xl:   18px;
    --lumi-radius-full: 9999px;

    /* ── Transitions ─────────────────────────────────────────
       Research: micro-interactions should be 120-220ms.
       Under 300ms or they become annoying. ────────────────── */
    --lumi-ease:       0.15s ease-out;
    --lumi-ease-slow:  0.25s ease-out;
    --lumi-ease-micro: 0.08s ease-out;
}

/* ── Base Resets Using Tokens ──────────────────────────────── */

html {
    /* Reserve scrollbar gutter on every viewport so Windows' persistent
       scrollbars and macOS' overlay scrollbars don't produce different
       horizontal layouts. Without this, 100vw differs from the visible
       content area on Windows by ~15-17px and content drifts off-centre. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: var(--lumi-font);
    font-size: var(--lumi-text-base);
    line-height: 1.6;
    color: var(--lumi-text-secondary);
    background: var(--lumi-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lumi-font);
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ── Utility: Amber Button ─────────────────────────────────── */

.lumi-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--lumi-accent);
    color: var(--lumi-accent-text);
    font-family: var(--lumi-font);
    font-size: var(--lumi-text-base);
    font-weight: 700;
    border: none;
    border-radius: var(--lumi-radius-sm);
    cursor: pointer;
    transition: background var(--lumi-ease), box-shadow var(--lumi-ease);
    white-space: nowrap;
}

.lumi-btn:hover {
    background: var(--lumi-accent-hover);
    box-shadow: var(--lumi-glow-btn);
}

.lumi-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lumi-btn--ghost {
    background: transparent;
    color: var(--lumi-text-muted);
    border: 1px solid var(--lumi-border);
}

.lumi-btn--ghost:hover {
    color: var(--lumi-text-secondary);
    border-color: var(--lumi-border-hover);
    background: rgba(255,255,255,0.03);
    box-shadow: none;
}

/* ── Utility: Card ─────────────────────────────────────────── */

.lumi-card {
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-lg);
    padding: var(--lumi-space-5) var(--lumi-space-6);
    transition: border-color var(--lumi-ease);
}

.lumi-card:hover {
    border-color: var(--lumi-border-hover);
}

/* ── Delight: Micro-Interactions ─────────────────────────────
   Research: 120-220ms sweet spot. scale(0.98) on press gives
   tactile feedback without layout shift. translateY(-1px) on
   hover creates subtle lift. All respects prefers-reduced-motion. */

/* Button press feedback — universal */
.lumi-btn:active,
button:active {
    transform: scale(0.98);
    transition-duration: var(--lumi-ease-micro);
}

/* Interactive card lift on hover */
.lumi-card-interactive {
    transition: border-color var(--lumi-ease), transform var(--lumi-ease), box-shadow var(--lumi-ease);
}

.lumi-card-interactive:hover {
    border-color: var(--lumi-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--lumi-shadow-card);
}

.lumi-card-interactive:active {
    transform: translateY(0) scale(0.995);
    transition-duration: var(--lumi-ease-micro);
}

/* Focus-visible ring — accessibility + delight */
:focus-visible {
    outline: 2px solid var(--lumi-border-focus);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--lumi-border-focus);
    outline-offset: 2px;
}

/* Skeleton shimmer loading — reusable */
.lumi-skeleton {
    background: var(--lumi-bg-elevated);
    border-radius: var(--lumi-radius-sm);
    position: relative;
    overflow: hidden;
}

.lumi-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);
    animation: lumi-shimmer 2s infinite;
}

@keyframes lumi-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Pulse dot — for live/active indicators */
.lumi-pulse {
    animation: lumi-pulse 2s ease-in-out infinite;
}

@keyframes lumi-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Smooth fade-in for dynamic content */
.lumi-fade-in {
    animation: lumi-fadeIn 0.25s ease-out both;
}

@keyframes lumi-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced Motion ──────────────────────────────────────────
   Honor system preferences. Collapse all animations/transitions. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}