/* ============================================
   loom — design tokens
   The single source of truth for system values.
   ============================================ */

:root {
  /* ─── Layout — four-tier width hierarchy ─────
     Each token has a distinct role; pick the one that matches what
     you're sizing, don't reach for the nearest pixel value.

     narrow  →  prose columns (long-form text where reading line-length matters)
     header  →  section headers (h2 + lede — text-focused intro blocks)
     frame   →  card/grid content (the page's standard "spine" width)
     dense   →  scannable matrix content (data tables, multi-col footer nav)
     max     →  chrome (header / site frame — sits wider than content for anchor)
     wide    →  opt-in breakout (rare, full-bleed-ish moments) */
  --content-narrow:  720px;
  --content-header:  840px;
  --content-frame:  1120px;
  --content-dense:  1200px;
  --content-max:    1280px;
  --content-wide:   1440px;

  /* ─── Type — families ────────────────────── */
  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Type — scale (16px base, 1.25 ratio) ─ */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-h6:   1rem;      /* 16px */
  --text-h5:   1.125rem;  /* 18px */
  --text-h4:   1.375rem;  /* 22px */
  --text-h3:   1.75rem;   /* 28px */
  --text-h2:   2.25rem;   /* 36px */
  --text-h1:   3rem;      /* 48px */

  /* ─── Type — line-heights ────────────────── */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  /* ─── Color — text on light (3-tier) ─────── */
  --color-fg:        #1D232C;  /* primary — headings */
  --color-fg-body:   #525C68;  /* body text */
  --color-fg-muted:  #727F8C;  /* muted — captions, metadata, pre-headline meta */

  /* ─── Color — text on dark (2-tier) ──────── */
  --color-fg-on-dark:       #fff;
  --color-fg-muted-on-dark: #A8B5C2;

  /* ─── Color — backgrounds ────────────────── */
  --color-bg:             #fff;
  --color-bg-muted:       #f0f7f9;  /* Giant Swarm White — pale blue alt section */
  --color-bg-muted-deep:  #e1edf5;  /* deeper pale-blue — third tone for section variation */
  --color-bg-dark:        #002645;  /* Giant Swarm Blue — dark sections */
  --color-bg-darkest:     #001b31;  /* Giant Swarm Black — footer / deepest moments */

  /* ─── Color — UI accent (interactive) ────── */
  /* Used for: hyperlinks, focus rings, sliders, checkmarks, tabs,
     active form controls, card hover borders, data callouts in UI tools.
     Context-aware: distinct values for light vs dark backgrounds. */
  --color-accent:               #007CFF;  /* on light bg */
  --color-accent-on-dark:       #009fff;  /* on dark bg */
  --color-accent-hover:         #005FB8;  /* light bg, darker on hover */
  --color-accent-on-dark-hover: #0089E5;  /* dark bg, darker on hover */

  /* ─── Color — brand-editorial accent ─────── */
  /* Used for: pre-headlines/kickers, timeline markers, featured-card
     borders + badges, section-level brand emphasis, hero brand stats.
     NEVER used for interactive UI — has no hover state. */
  --color-brand-accent: #f65954;  /* coral */

  /* ─── Color — primary CTA gradient ───────── */
  /* The brand mark itself. Reserved for primary CTAs only. */
  --gradient-cta: linear-gradient(111.02deg, #ff7700, #f65954);

  /* ─── Color — borders ────────────────────── */
  --color-border:      #e3e6ec;            /* light bg */
  --color-border-dark: rgba(255,255,255,0.1);  /* dark bg */

  /* ─── Color — focus ring ─────────────────── */
  /* Same value as UI accent, applied via outline on :focus-visible. */
  --color-focus:         var(--color-accent);
  --color-focus-on-dark: var(--color-accent-on-dark);
}

/* ─── Mobile heading scale ──────────────────────────────────────────
   Same 1.25 ratio, shifted down one notch on mobile.
   Every section that uses --text-h* tokens scales automatically. */
@media (max-width: 767px) {
  :root {
    --text-h1: 2.25rem;   /* 36px (was 48px) */
    --text-h2: 1.75rem;   /* 28px (was 36px) */
    --text-h3: 1.375rem;  /* 22px (was 28px) */
    --text-h4: 1.125rem;  /* 18px (was 22px) */
    --text-h5: 1rem;      /* 16px (was 18px) */
    --text-h6: 0.875rem;  /* 14px (was 16px) */
  }
}