/* ============================================================================
 * Plyvona — Design Tokens (v2.1 Pop Behavioral)
 * ----------------------------------------------------------------------------
 * Single source of truth for color, type, spacing, radii, shadows, motion.
 * Light + dark palettes mapped to the same variable names.
 *
 * v2.1 (2026-05-30): mirrors brand/tokens/design-tokens.css — DM Serif Display
 * + DM Sans (+ JetBrains Mono), warm cream / warm dark, violet brand, sunset
 * accent. Token NAMES are unchanged from v1 so the 12 games + base.css keep
 * working at runtime (canvas games read --accent-rgb / --ink-rgb etc. by name
 * and re-read on the `plyvona:theme` event). Only VALUES + fonts changed.
 *
 * Per-game accent:
 *   Each game declares its own --accent / --accent-rgb / --accent-soft (and
 *   --ink-on-accent) in a small inline <style> block, using one of three
 *   violet tints (light / mid / deep). tokens.css does NOT enumerate games.
 * ========================================================================= */

/* ── 1. FONTS ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ── 2. TYPE SCALE ─────────────────────────────────────────────────────── */
:root {
  /* clamp(min, fluid, max) — scales between mobile and desktop */
  --fs-eyebrow:  11px;
  --fs-caption:  12px;
  --fs-ui-sm:    13px;
  --fs-body:     clamp(15px, 0.4vw + 14px, 16px);
  --fs-lead:     clamp(16px, 0.6vw + 14.5px, 18px);
  --fs-h4:       clamp(20px, 0.5vw + 18.5px, 22px);
  --fs-h3:       clamp(24px, 1vw + 20px, 28px);
  --fs-h2:       clamp(28px, 2vw + 22px, 36px);
  --fs-h1:       clamp(34px, 3vw + 24px, 48px);
  --fs-display:  clamp(44px, 4.5vw + 28px, 64px);

  /* Line heights */
  --lh-display:  1.05;
  --lh-h1:       1.08;
  --lh-h2:       1.15;
  --lh-h3:       1.2;
  --lh-h4:       1.3;
  --lh-lead:     1.45;
  --lh-body:     1.55;
  --lh-ui:       1.4;

  /* Letter spacing — DM Serif Display needs tight negative tracking at display sizes */
  --ls-display:  -0.025em;
  --ls-h1:       -0.02em;
  --ls-h2:       -0.015em;
  --ls-h3:       -0.01em;
  --ls-h4:       0;
  --ls-body:     0;
  --ls-eyebrow:  0.16em;
  --ls-button:   0.02em;
  --ls-kbd:      0.04em;
}

/* ── 3. SPACING (8px base) ─────────────────────────────────────────────── */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ── 4. RADII ──────────────────────────────────────────────────────────── */
:root {
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  28px;
  --r-pill: 999px;
}

/* ── 5. MOTION ─────────────────────────────────────────────────────────── */
:root {
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    320ms;
  --t-slower:  560ms;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
}

/* ── 6. LAYOUT ─────────────────────────────────────────────────────────── */
:root {
  --container-narrow: 680px;
  --container-base:   860px;
  --container-wide:   1200px;
}

/* ============================================================================
 * 7. LIGHT PALETTE — default (v2.1 Pop Behavioral)
 * --------------------------------------------------------------------------
 * Warm cream base. Violet is the brand color. Each game overrides --accent
 * with one of three violet tints (light / mid / deep).
 * ========================================================================= */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg:           #FFF8EE;
  --bg-elevated:  #FFFCF6;
  --surface:      #FFFFFF;
  --surface-2:    #F5EFE2;
  --surface-3:    #EDE5D3;
  --overlay:      rgba(26, 26, 46, 0.55);

  /* Ink */
  --ink:          #1A1A2E;
  --ink-2:        #2E2E3E;
  --ink-muted:    #6B6677;
  --ink-faint:    #9A95A6;
  --ink-on-brand: #FFFFFF;
  --ink-on-accent:#FFFFFF;

  /* Borders */
  --border:         #F0E6D2;
  --border-strong:  #D8CCB0;
  --border-faint:   #F8F2E5;

  /* Brand (violet) + 3-tint scaffold */
  --brand:        #5B4FBD;
  --brand-2:      #6A5DC9;
  --brand-rgb:    91, 79, 189;
  --brand-soft:   rgba(91, 79, 189, 0.10);
  --brand-light:  #8B7FE0;
  --brand-deep:   #4A3FA0;

  /* Accent (sunset) — graphic only on cream; never body text */
  --sunset:       #FFB347;
  --sunset-rgb:   255, 179, 71;

  /* Status (values per spec 007 a11y matrix) */
  --success:      #3A7F5E;
  --success-soft: rgba(58, 127, 94, 0.12);
  --warning:      #C9933A;
  --warning-soft: rgba(201, 147, 58, 0.14);
  --danger:       #D04631;
  --danger-soft:  rgba(208, 70, 49, 0.10);
  --ink-on-success: #FFFFFF;
  --ink-on-danger:  #FFFFFF;

  /* Default --accent fallback (overridden per game) */
  --accent:       var(--brand);
  --accent-rgb:   var(--brand-rgb);
  --accent-soft:  var(--brand-soft);

  /* Shadows (light bg → low opacity) */
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.10);
  /* Focus ring = brand violet (locked 2026-05-30). Two-tone: bg gap + solid ring. */
  --shadow-focus:   0 0 0 2px var(--bg), 0 0 0 5px var(--brand);

  /* Raw RGB tuples for canvas/SVG drawing */
  --ink-rgb:      26, 26, 46;
  --border-rgb:   240, 230, 210;
  --surface-rgb:  255, 255, 255;
  --bg-rgb:       255, 248, 238;
}

/* ============================================================================
 * 8. DARK PALETTE
 * --------------------------------------------------------------------------
 * Warm dark base. Inks are warm cream. Violet lightens for contrast.
 * ========================================================================= */
[data-theme="dark"] {
  /* Surfaces */
  --bg:           #1A1A2E;
  --bg-elevated:  #252544;
  --surface:      #252544;
  --surface-2:    #2D2D52;
  --surface-3:    #353559;
  --overlay:      rgba(0, 0, 0, 0.70);

  /* Ink */
  --ink:          #FFF8EE;
  --ink-2:        #E8E3D5;
  --ink-muted:    #9F9AB0;
  --ink-faint:    #6F6B80;
  --ink-on-brand: #1A1A2E;
  --ink-on-accent:#1A1A2E;

  /* Borders */
  --border:         #2F2F4D;
  --border-strong:  #4A4A6B;
  --border-faint:   #27274A;

  /* Brand (violet) + 3-tint scaffold */
  --brand:        #8B7FE0;
  --brand-2:      #9889E5;
  --brand-rgb:    139, 127, 224;
  --brand-soft:   rgba(139, 127, 224, 0.16);
  --brand-light:  #A899EE;
  --brand-deep:   #7B6FD5;

  /* Accent (sunset) */
  --sunset:       #FFB347;
  --sunset-rgb:   255, 179, 71;

  /* Status (dark — lightened) */
  --success:      #5DBE85;
  --success-soft: rgba(93, 190, 133, 0.14);
  --warning:      #E8B055;
  --warning-soft: rgba(232, 176, 85, 0.16);
  --danger:       #E76A4F;
  --danger-soft:  rgba(231, 106, 79, 0.14);
  --ink-on-success: #1A1A2E;
  --ink-on-danger:  #1A1A2E;

  --accent:       var(--brand);
  --accent-rgb:   var(--brand-rgb);
  --accent-soft:  var(--brand-soft);

  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.70), 0 6px 16px rgba(0, 0, 0, 0.50);
  --shadow-focus:   0 0 0 2px var(--bg), 0 0 0 5px var(--brand);

  --ink-rgb:      255, 248, 238;
  --border-rgb:   47, 47, 77;
  --surface-rgb:  37, 37, 68;
  --bg-rgb:       26, 26, 46;
}

/* ============================================================================
 * 9. ACCESSIBILITY & MOTION PREFERENCES
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root,
  [data-theme="light"] {
    --border:         #C9BD9E;
    --border-strong:  #A89A78;
    --ink-muted:      #4A4656;
  }
  [data-theme="dark"] {
    --border:         #4A4A6B;
    --border-strong:  #6B6B8C;
    --ink-muted:      #B5B0C2;
  }
}