/* ==========================================================================
   Thomas Surface Coatings — Design Tokens
   Single source of truth. Do not hard-code hex values anywhere else.
   v1.0 · 2026-08-19
   ========================================================================== */

:root{
  /* ---------- Neutrals ---------- */
  --ink:       #0a0a0a;  /* Onyx — dark sections, nav, footer, headlines on light */
  --ink-2:     #141414;  /* Onyx 2 — cards and form panels sitting on onyx */
  --ink-3:     #1d1d1d;  /* Onyx 3 — hover for onyx buttons, gradient floor end */
  --bone:      #f4f1ea;  /* Bone — ALL text on onyx. Never pure white for body on dark */
  --paper:     #ffffff;  /* Paper — default page and card background */
  --paper-2:   #f6f5f1;  /* Paper 2 — alternating sections, row hover, ghost hover */
  --steel:     #6b7280;  /* Steel — secondary body copy, labels, lede */
  --steel-2:   #9ca3af;  /* Steel 2 — placeholders, captions on dark, muted meta */
  --steel-3:   #d4d4d0;  /* Steel 3 — disabled states, inactive markers */

  /* ---------- Brand accents (use sparingly) ---------- */
  --red:       #d7202b;  /* Signal red — primary CTA, accent word, corner rules, active nav */
  --red-2:     #a3151e;  /* Red deep — hover on every red surface. Never a standalone fill */
  --red-dim:   rgba(215,32,43,0.16);
  --blue:      #2557a0;  /* Wasatch blue — secondary marker, ~1/4 the frequency of red */
  --blue-2:    #1a3f78;  /* Blue deep — blue hover, deep end of floor-glow gradient */
  --blue-dim:  rgba(37,87,160,0.18);

  /* ---------- Rules / hairlines ---------- */
  --line:        rgba(10,10,10,0.10);
  --line-soft:   rgba(10,10,10,0.06);
  --line-dark:   rgba(244,241,234,0.14);
  --line-dark-2: rgba(244,241,234,0.07);

  /* ---------- Type stacks ---------- */
  --display: "Big Shoulders Display", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Spacing (8pt base) ---------- */
  --s1:4px; --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---------- Layout ---------- */
  --maxw: 1280px;        /* content max width */
  --gutter: 32px;        /* desktop gutter; 24px at <=640px */
  --section-y: 96px;     /* desktop section padding; 64px at <=720px */
}

/* Google Fonts import — Big Shoulders Display, Geist, JetBrains Mono */
/* @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); */