/* ============================================================
   LetsGame — Design Tokens (variables.css)
   Light Slate Utility palette (per Factory V9 LIGHT_COLOR_007).
   ============================================================ */

:root {
  /* Brand palette — slate utility */
  --primary: #2457A7;
  --primary-ink: #1B4079;
  --primary-soft: #DDE7F6;
  --accent: #A044C5;
  --accent-soft: #F1E0F8;
  --background: #F6F8FC;
  --background-warm: #FBF7F0;
  --background-elev: #EEF2F8;
  --surface: #FFFFFF;
  --surface-2: #F1F4FA;
  --surface-3: #E9EEF7;
  --ink: #1B2638;
  --ink-muted: #5A6B80;
  --ink-soft: #677691;   /* AA-compliant muted text on light backgrounds (>=4.5:1 on #FFF) */
  --ink-light: #8595AB;  /* dark-background only — passes 4.78:1 on var(--ink) */
  --border: #CDD8E8;
  --border-soft: #E2E8F3;
  --hairline: #D7DFEC;
  --rule: #B6C2D6;
  --success: #2F855A;
  --warn: #B7791F;
  --danger: #9B2C2C;
  --focus: #2457A7;

  /* Type system */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* Radii */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(27, 38, 56, 0.06);
  --shadow-2: 0 2px 6px rgba(27, 38, 56, 0.08);
  --shadow-3: 0 6px 18px rgba(27, 38, 56, 0.10);
  --shadow-card: 0 1px 2px rgba(27, 38, 56, 0.05), 0 4px 14px rgba(27, 38, 56, 0.06);
  --shadow-nav: 0 1px 0 rgba(27, 38, 56, 0.06);

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --container-readable: 720px;
  --header-h: 64px;

  /* Z layers */
  --z-header: 250;
  --z-drawer: 50;
  --z-overlay: 200;
  --z-hamburger: 300;
  --z-sticky-cta: 110;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-1: 120ms;
  --t-2: 200ms;
  --t-3: 320ms;
}