/**
 * /var/www/medforddragstrip.com/public/assets/css/tokens.css
 * Design tokens — all downstream values reference these custom properties.
 */

:root {
  /* --- COLOUR --- */
  /* Dark surfaces — the track */
  --ink-900: #0b0d0e;
  --ink-800: #14181a;
  --ink-700: #1e2427;
  --ink-500: #4a5459;

  /* Light surfaces — the paper */
  --paper-50: #f2f0ea;
  --paper-100: #e7e4db;
  --paper-300: #cfc9bc;

  /* Type */
  --text-on-dark: #f2f0ea;
  --text-on-dark-mute: #a8b0b4;
  --text-on-light: #0b0d0e;
  --text-on-light-mute: #4f5559;

  /* Accent — signal green, the go light */
  --accent: #00d45e;
  --accent-deep: #00a849;
  --accent-ink: #04220f;

  /* Status — FIXED on every install, never themed */
  --status-go: #00d45e;
  --status-watch: #f0b429;
  --status-stop: #e5484d;
  --status-info: #2d6fa8;
  --status-info-accent: #5a9bd4;
  --status-neutral: #7c868b;

  /*
   * CRITICAL ACCENT CONSTRAINT
   * --accent clears 9.7:1 on --ink-900 but only 1.75:1 on --paper-50.
   * On DARK surfaces: accent may be text, rules, icons, or fills.
   * On LIGHT surfaces: accent may ONLY be a fill (with --accent-ink text on
   * it), a bar, an underline, or a border. NEVER text colour.
   */

  /* --- TYPE SCALE (fluid, 375px–1920px) --- */
  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-hero-size: clamp(3rem, 8.5vw, 7.5rem);
  --t-h1-size: clamp(2.5rem, 6vw, 5rem);
  --t-h2-size: clamp(1.75rem, 3.5vw, 2.75rem);
  --t-h3-size: clamp(1.25rem, 2vw, 1.625rem);

  --t-hero: var(--font-display);
  --t-h1: var(--font-display);
  --t-h2: var(--font-display);
  --t-h3: var(--font-display);
  --t-eyebrow: var(--font-mono);
  --t-body-lg: var(--font-body);
  --t-body: var(--font-body);
  --t-small: var(--font-body);
  --t-data: var(--font-mono);
  --t-label: var(--font-mono);

  /* --- SPACING (8px base) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-12: 6rem;
  --band-pad: clamp(3.5rem, 8vw, 7rem);

  /* --- LAYOUT --- */
  --max-page: 1920px;
  --max-text: 1600px;
  --measure: 68ch;
  --gutter: 16px;
  --content-width: min(100% - (2 * var(--gutter)), var(--max-text));
  --radius: 2px;

  /* --- MOTION --- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 220ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}