/* Design tokens — Phase 2 foundation.
 * Brief v2 §6: pure CSS variables, Major Third typography scale,
 * WCAG 2.1 AA contrast, 4px spacing grid.
 */

:root {
  /* Typography — Major Third ratio 1.25 */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --font-size-xs:   0.64rem;   /* 10.24px  */
  --font-size-sm:   0.8rem;    /* 12.8px   */
  --font-size-base: 1rem;      /* 16px     */
  --font-size-md:   1.25rem;   /* 20px     */
  --font-size-lg:   1.563rem;  /* 25px     */
  --font-size-xl:   1.953rem;  /* 31.25px  */
  --font-size-2xl:  2.441rem;  /* 39.06px  */
  --font-size-3xl:  3.052rem;  /* 48.83px  */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;

  --line-height-tight: 1.2;
  --line-height-body:  1.55;
  --line-height-loose: 1.8;

  /* Spacing — 4px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Neutrals (light theme) */
  --color-neutral-0:   #ffffff;
  --color-neutral-5:   #f8fafc;
  --color-neutral-10:  #f1f5f9;
  --color-neutral-20:  #e2e8f0;
  --color-neutral-30:  #cbd5e1;
  --color-neutral-50:  #64748b;
  --color-neutral-60:  #475569;
  --color-neutral-70:  #334155;
  --color-neutral-80:  #1e293b;
  --color-neutral-90:  #0f172a;

  /* Semantic — traffic-light + brand */
  --color-success:       #15803d;   /* AA on white */
  --color-success-bg:    #dcfce7;
  --color-success-border:#86efac;

  --color-warn:          #b45309;   /* AA on white */
  --color-warn-bg:       #fef3c7;
  --color-warn-border:   #fcd34d;

  --color-danger:        #b91c1c;   /* AA on white */
  --color-danger-bg:     #fee2e2;
  --color-danger-border: #fca5a5;

  --color-info:          #1d4ed8;   /* AA on white */
  --color-info-bg:       #dbeafe;
  --color-info-border:   #93c5fd;

  --color-accent:        #0f766e;
  --color-accent-bg:     #ccfbf1;

  /* Surfaces */
  --surface-bg:          var(--color-neutral-5);
  --surface-card:        var(--color-neutral-0);
  --surface-muted:       var(--color-neutral-10);
  --surface-border:      var(--color-neutral-20);
  --text-primary:        var(--color-neutral-90);
  --text-secondary:      var(--color-neutral-60);
  --text-muted:          var(--color-neutral-50);

  /* Focus ring — WCAG 2.1 3px minimum */
  --focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.45);

  /* Elevation */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05);

  /* Motion */
  --motion-fast:   120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base:   200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow:   320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Breakpoints (documented; media queries are hard-coded inline) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* Touch — Brief v2 §6 44×44 minimum */
  --touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-bg:     var(--color-neutral-90);
    --surface-card:   var(--color-neutral-80);
    --surface-muted:  var(--color-neutral-70);
    --surface-border: var(--color-neutral-70);
    --text-primary:   var(--color-neutral-10);
    --text-secondary: var(--color-neutral-30);
    --text-muted:     var(--color-neutral-50);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* Root reset */
html {
  font-family: var(--font-family-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface-bg);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }