/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — Steep: "serif analytics on warm paper".

   Source of truth: design_tokens.json + DESIGN.md (repo root).
   Every value below is transcribed from those two files. If they disagree
   with this file, they win — regenerate rather than hand-patch.

   System character: pure white canvas, 97% achromatic, one warm peach
   accent surface. Display type is ALWAYS serif at weight 400 — the
   restraint is the signature.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Color ─────────────────────────────────────────────────────────────
     Nine values. Seven achromatic, one peach, one brown. Nothing else. */
  --color-ink-black: #17191c;      /* Primary text, filled buttons, logo */
  --color-paper-white: #ffffff;    /* Page canvas, button text, elevated cards */
  --color-mist-gray: #f2f2f3;      /* Card surfaces, input fills */
  --color-fog-white: #fafafb;      /* Alternating section bands, hover */
--color-slate-gray: #777b86; /* Links, muted helper text, footer */
  --color-ash-gray: #979799;       /* Tertiary labels, category tags */
  --color-smoke-gray: #a3a6af;     /* Placeholders, disabled labels */
  --color-blush-peach: #fbe1d1;    /* The only chromatic surface */
   --color-sienna-brown: #5d2a1a;   /* Ink on peach; chart strokes; error/destructive surface */
   --color-error: var(--color-sienna-brown); /* Single error language: sienna on blush-peach. No red in the palette. */

  /* Hairline border — DESIGN.md "Quick Color Reference" */
  --color-border: #ececec;

  /* ─── Typography — families ────────────────────────────────────────────
     Signifier and Sohne are licensed faces we don't ship. DESIGN.md names
     the sanctioned substitutes; both stacks MUST stay in the correct
     genre. A sans-serif fallback on the display face silently destroys
     the entire aesthetic, so every fallback here is a serif. */
  --font-signifier: 'Source Serif 4', 'GT Sectra', 'Tiempos Headline',
    ui-serif, Georgia, 'Times New Roman', serif;
  --font-sohne: 'Inter', 'Söhne', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ─── Typography — weights ─────────────────────────────────────────────
     The half-steps are the point: hierarchy without reaching for bold. */
  --font-weight-regular: 400;
  --font-weight-430: 430;
  --font-weight-450: 450;
  --font-weight-480: 480;
  --font-weight-medium: 500;

  /* ─── Typography — scale ───────────────────────────────────────────────
     Sizes, line heights and tracking per the DESIGN.md type-scale table.
     Tracking tightens as size grows — that's the typographic signature. */
  --text-sm: 14px;
  --leading-sm: 1.43;

  --text-caption: 15px;
  --leading-caption: 1.5;

  --text-body: 17px;
  --leading-body: 1.35;

  --text-body-lg: 20px;
  --leading-body-lg: 1.35;

  --text-subheading: 22px;
  --leading-subheading: 1.5;

  --text-heading-sm: 26px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.234px;

  --text-heading: 44px;
  --leading-heading: 1.3;
  --tracking-heading: -0.66px;

  --text-heading-lg: 64px;
  --leading-heading-lg: 1.3;
  --tracking-heading-lg: -0.96px;

  --text-display: 90px;
  --leading-display: 1.3;
  --tracking-display: -2.25px;

  /* ─── Spacing — 4px base unit ──────────────────────────────────────────── */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-124: 124px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* ─── Layout ───────────────────────────────────────────────────────────── */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 8px;

  /* ─── Radius ───────────────────────────────────────────────────────────
     Two structural radii carry the system: 9999px on every button,
     24px on every content card. Nothing sharp, nothing in between. */
  --radius-cards: 24px;
  --radius-elevatedcards: 20px;
  --radius-inputs: 16px;
  --radius-smallcards: 16px;
  --radius-images: 12px;
  --radius-buttons: 9999px;

  /* ─── Shadow ───────────────────────────────────────────────────────────
     oklab() from design_tokens.json is rewritten as rgba() for browser
     compatibility — same visual result, far wider support.
     Only floating product artifacts earn elevation. Content cards never do. */
  --shadow-subtle:
    rgba(0, 0, 0, 0.05) 0 0 0 1px,
    rgba(0, 0, 0, 0.08) 0 4px 24px 0;
  --shadow-subtle-2:
    rgba(0, 0, 0, 0.05) 0 0 0 1px,
    rgba(0, 0, 0, 0.1) 0 8px 40px 0;
  --shadow-subtle-3:
    rgba(4, 23, 43, 0.05) 0 0 0 1px,
    rgba(0, 0, 0, 0.1) 0 20px 25px -5px,
    rgba(0, 0, 0, 0.1) 0 8px 10px -6px;

  /* Semantic elevation aliases (DESIGN.md § Elevation) */
  --shadow-artifact: var(--shadow-subtle-3);
  --shadow-overlay: var(--shadow-subtle-2);
  --shadow-popover: var(--shadow-subtle);

  /* ─── Surfaces ─────────────────────────────────────────────────────────── */
  --surface-canvas: var(--color-paper-white);
  --surface-card-mist: var(--color-mist-gray);
  --surface-section-fog: var(--color-fog-white);
  --surface-accent-blush: var(--color-blush-peach);
  --surface-elevated: var(--color-paper-white);

  /* ─── Status ───────────────────────────────────────────────────────────
     A billing and ticketing product must signal overdue / paid / pending,
     but DESIGN.md forbids chromatic colour beyond the peach-brown pair.

     Resolution: status is carried by the sanctioned pair plus the
     achromatic ramp, never by an imported hue. "Attention" spends the
     peach/sienna pair — the only place urgency is allowed to be warm.
     Every badge also carries a word, so hue is never the sole signal
     (a WCAG requirement regardless of palette). */
  --status-attention-text: var(--color-sienna-brown);
  --status-attention-surface: rgba(251, 225, 209, 0.55);
  --status-attention-border: rgba(93, 42, 26, 0.18);

  --status-active-text: var(--color-ink-black);
  --status-active-surface: var(--color-mist-gray);
  --status-active-border: rgba(23, 25, 28, 0.12);

  --status-attention-text: var(--color-sienna-brown);
  --status-attention-surface: rgba(251, 225, 209, 0.55);
  --status-attention-border: rgba(93, 42, 26, 0.18);

  --status-going-text: var(--color-paper-white);
  --status-going-surface: var(--color-ink-black);
  --status-going-border: var(--color-ink-black);

  --status-pending-text: var(--color-slate-gray);
  --status-pending-surface: var(--color-fog-white);
  --status-pending-border: var(--color-border);

  --status-confirmed-text: var(--color-sienna-brown);
  --status-confirmed-surface: var(--color-blush-peach);
  --status-confirmed-border: rgba(93, 42, 26, 0.18);

  --status-pending-text: var(--color-slate-gray);
  --status-pending-surface: var(--color-fog-white);
  --status-pending-border: var(--color-border);

  --status-confirmed-text: var(--color-sienna-brown);
  --status-confirmed-surface: var(--color-blush-peach);
  --status-confirmed-border: rgba(93, 42, 26, 0.18);

  --status-quiet-text: var(--color-slate-gray);
  --status-quiet-surface: var(--color-fog-white);
  --status-quiet-border: var(--color-border);

  /* ─── Focus ────────────────────────────────────────────────────────────
     Focus is the one place an achromatic system may not stay quiet:
     it must be unmistakable. Ink ring at full contrast, offset so it
     reads against both white and mist surfaces. */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-ink-black);
  --focus-ring-offset: 2px;

  /* ─── Motion ───────────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.18s ease;
  --transition-slow: 0.25s ease;
}

/* Respect the OS reduced-motion preference everywhere, no exceptions. */
@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;
  }
}