/* =========================================================
   STADIUM DAYLIGHT — design tokens
   Source of truth: DESIGN.md
   Canonical reference: /design-system (app/views/design_system/index.html.erb)
   All colors authored in OKLCH. Light-mode only.
   ========================================================= */

:root {
  /* Neutrals */
  --ink:            oklch(0.22 0.015 250);
  --ink-soft:       oklch(0.32 0.012 250);
  --slate:          oklch(0.52 0.012 250);
  --slate-soft:     oklch(0.68 0.010 250);
  --chalk:          oklch(0.985 0.005 90);
  --surface:        oklch(1 0 0);
  --border:         oklch(0.93 0.005 90);
  --border-soft:    oklch(0.96 0.004 90);

  /* Brand */
  --pitch:          oklch(0.74 0.085 152);
  --pitch-deep:     oklch(0.55 0.090 152);
  --pitch-soft:     oklch(0.92 0.030 152);
  --terracotta:     oklch(0.72 0.10 45);
  --terracotta-deep:oklch(0.45 0.10 45);
  --terracotta-soft:oklch(0.93 0.035 45);
  --sky:            oklch(0.84 0.06 235);
  --sky-deep:       oklch(0.45 0.08 235);
  --sky-soft:       oklch(0.94 0.025 235);

  /* Semantic */
  --success:        oklch(0.72 0.10 145);
  --warning:        oklch(0.78 0.09 75);
  --warning-deep:   oklch(0.45 0.09 75);
  --warning-soft:   oklch(0.96 0.03 75);
  --error:          oklch(0.65 0.13 25);
  --error-deep:     oklch(0.40 0.13 25);
  --error-soft:     oklch(0.95 0.04 25);
  --info:           oklch(0.70 0.08 235);

  /* Extensions (project-specific, not part of Stadium Daylight) */
  --oranje:         oklch(0.72 0.15 50);

  /* Spacing (4px base) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Global base — applied to every page rendered through the application layout.
   Lives here so any view that links tokens.css inherits the same default body
   styling. Keep this block in sync with DESIGN.md's body-defaults intent. */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--chalk);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}