/**
 * Pathway Labs — Design Tokens (CSS Custom Properties)
 *
 * Generated from DESIGN.md v1.2 (2026-04-24).
 * To regenerate: `npx @google/design.md export --format css DESIGN.md`
 *
 * Drop this file at the top of your stylesheet and use vars throughout.
 * Example: color: var(--color-ink); background: var(--color-bone);
 *
 * NOTE: the brand primary/secondary tokens (ink, on-ink, coral, on-coral,
 * coral-soft, bluex, bluex-soft, bone, bone-2, on-bone, amber-soft) were
 * reconciled by hand to the exact Brand Guidelines V1 (2026-06-10) hex values
 * and no longer match DESIGN.md v1.2. Re-exporting from DESIGN.md will revert
 * them -- update the guide or re-apply this reconciliation.
 */

:root {
  /* ── Brand foundation ──────────────────────────────────────── */
  --color-ink:        #0D1141;
  --color-ink-2:      #1A2050;
  --color-ink-deep:   #0A1230;
  --color-on-ink:     #F3EFE3;

  /* ── Primary accent (Coral) ────────────────────────────────── */
  --color-coral:        #E95D49;
  --color-on-coral:     #0D1141;
  --color-coral-deep:   #C02A1A;
  --color-coral-soft:   #F19A7F;

  /* ── Secondary accent (Bluex / electric blue) ──────────────── */
  --color-bluex:        #4A5BA3;
  --color-bluex-soft:   #91A0D1;
  --color-bluex-deep:   #3A4AA8;

  /* ── Surfaces ──────────────────────────────────────────────── */
  --color-bone:        #F3EFE3;
  --color-bone-2:      #F3EFE3;
  --color-bone-3:      #FFF4EC;
  --color-bone-warm:   #FFD8B8;
  --color-on-bone:     #0D1141;

  /* ── Coral Field (product UI palette) ──────────────────────── */
  --color-field-coral:       #FF4D38;
  --color-field-coral-deep:  #C02A1A;
  --color-field-coral-glow:  #FFBA90;
  --color-field-cobalt:      #2058D0;
  --color-on-field:          #FFF4EC;

  /* ── Tertiary accents ──────────────────────────────────────── */
  --color-amber:       #E8B07A;
  --color-amber-soft:  #F5C89B;
  --color-violet:      #AB8FD8;

  /* ── Semantic ──────────────────────────────────────────────── */
  --color-success:     #1F7A4D;
  --color-on-success:  #FFFFFF;
  --color-warning:     #A85A00;
  --color-on-warning:  #FFFFFF;
  --color-danger:      #B53A26;
  --color-on-danger:   #FFFFFF;
  --color-info:        #3A4AA8;
  --color-on-info:     #FFFFFF;

  /* ── Lines & overlays ──────────────────────────────────────── */
  --color-line:   rgba(14, 18, 64, 0.12);
  --color-scrim:  rgba(10, 18, 48, 0.60);

  /* ── Typography family ─────────────────────────────────────── */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale ────────────────────────────────────────────── */
  --text-display-xl: 108px;
  --text-display-lg: 72px;
  --text-h1:         40px;
  --text-h2:         32px;
  --text-h3:         22px;
  --text-body-lg:    20px;
  --text-body:       16px;
  --text-body-sm:    14px;
  --text-eyebrow:    12px;
  --text-stat:       72px;
  --text-label:      13px;
  --text-mono:       14px;

  /* ── Font weights ──────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing (8px grid + dense sub-grid) ───────────────────── */
  --space-px:   1px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   20px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  40px;
  --space-4xl:  48px;
  --space-5xl:  64px;
  --space-6xl:  80px;
  --space-7xl:  96px;

  /* ── Radius ────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-pathway: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-fast:        120ms;
  --motion-base:        240ms;
  --motion-slow:        380ms;
  --motion-deliberate:  560ms;

  /* ── Elevation (ink-tinted, restrained) ────────────────────── */
  --shadow-floating: 0 8px 24px rgba(14, 18, 64, 0.12);
  --shadow-overlay:  0 16px 48px rgba(14, 18, 64, 0.18);
}

/* Reduced-motion override — required by design system */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:        0ms;
    --motion-base:        0ms;
    --motion-slow:        0ms;
    --motion-deliberate:  0ms;
  }
}

/* Tabular numerics for stats and ECG metadata — apply via class */
.pathway-tnum {
  font-feature-settings: "tnum" 1, "lnum" 1;
}