/* ============================================================
   BRAG — design tokens
   Shared between the landing page and the D1–D6 trace pages.
   See planning/design/design_brief.md for the full system.
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-latin.woff2') format('woff2-variations');
}

:root {
  /* --- color (dark editorial, warm undertone) -------------- */
  --ink:           #EBE7DD;  /* warm cream — primary text */
  --ink-soft:      #B8B3A6;  /* secondary text */
  --ink-mute:      #7A766B;  /* tertiary, captions, UI */
  --paper:         #13110D;  /* very dark warm — page bg */
  --paper-raised:  #1C1A15;  /* raised — cards, panels, artifacts */
  --rule:          #2D2A23;  /* subtle hairline */
  --rule-strong:   #4D483D;  /* visible hairline */
  --signal:        #FF4E5A;  /* coral-red — single accent */
  --verify:        #3DD68C;  /* verifier-pass, normal outcomes */
  --warn:          #F0A847;  /* partial / degraded */
  --halt:          #B85F5F;  /* hard halt */

  /* --- type families -------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- fluid type scale (desktop ratio 1.333) -------------- */
  --fs-eyebrow:  clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --fs-caption:  clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-body:     clamp(1rem,      0.94rem + 0.25vw, 1.1875rem);
  --fs-lead:     clamp(1.125rem,  1.0rem + 0.5vw,   1.375rem);
  --fs-h6:       clamp(0.95rem,   0.90rem + 0.20vw, 1.05rem);
  --fs-h5:       clamp(1.0625rem, 1.0rem + 0.3vw,   1.25rem);
  --fs-h4:       clamp(1.25rem,   1.10rem + 0.65vw, 1.625rem);
  --fs-h3:       clamp(1.5rem,    1.25rem + 1.0vw,  2rem);
  --fs-h2:       clamp(1.75rem,   1.40rem + 1.4vw,  2.5rem);
  --fs-h1:       clamp(2rem,      1.45rem + 2.2vw,  3.25rem);
  --fs-hero:     clamp(2.5rem,    1.75rem + 3.0vw,  4.5rem);

  /* --- spacing (8px baseline) ----------------------------- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px;
  --space-9:  192px;

  --space-section: clamp(64px, 8vw, 128px);
  --space-section-tight: clamp(48px, 6vw, 96px);

  /* --- grid ----------------------------------------------- */
  --grid-max:     1440px;
  --grid-gap:     24px;
  --grid-margin:  clamp(20px, 5vw, 88px);

  /* --- motion --------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:     150ms;
  --dur:          220ms;
  --dur-slow:     360ms;

  /* --- layout helpers ------------------------------------- */
  --measure:      62ch;
  --measure-wide: 78ch;
  --hairline:     1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);
  --hairline-ink: 1px solid var(--ink);
}

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