/* =========================================================================
   Claysend · BRUTALIST MONO — design tokens
   colors_and_type.css — the single source of truth for color + type.
   Link this BEFORE brutalist.css. Everything keys off these CSS vars.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- TYPE ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;  /* UI, headings, labels */
  --font-body:    'Space Grotesk', system-ui, sans-serif;  /* paragraphs */
  --font-mono:    'Space Mono', ui-monospace, monospace;   /* data: emails, domains, numbers, codes */

  /* type scale (px) — tight, mono-grid friendly */
  --fs-mega:   44px;   /* page hero numbers / big stats   */
  --fs-h1:     27px;   /* page titles                     */
  --fs-h2:     19px;   /* section / card titles           */
  --fs-h3:     15px;   /* sub-headers                     */
  --fs-body:   13.5px; /* default body                    */
  --fs-sm:     12.5px; /* dense body / table              */
  --fs-data:   12px;   /* mono data                       */
  --fs-label:  10.5px; /* UPPERCASE eyebrows / table head */
  --fs-micro:  10px;   /* tiniest meta                    */

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* uppercase label treatment — used everywhere for eyebrows + headers */
  --ls-label: 0.08em;
  --ls-tight: -0.02em;

  /* ---------- COLOR ---------- */
  /* neutrals: warm newsprint, stark contrast */
  --paper:     #f4f3ee;   /* app background (warm off-white)  */
  --surface:   #ffffff;   /* cards / panels / rows            */
  --surface-2: #f4f3ee;   /* recessed fills, table head       */
  --surface-3: #e8e6dd;   /* hover fills, tracks              */
  --ink:       #0a0a0a;   /* primary text + ALL borders       */
  --ink-2:     #2b2b28;   /* secondary text                   */
  --ink-3:     #5a5a54;   /* tertiary / meta                  */
  --mute:      #8b8b82;   /* faint / placeholder              */
  --line:      #0a0a0a;   /* borders are black, always        */

  /* the ONE accent — electric blue (primary actions, AI, focus) */
  --accent:        #1f3df0;
  --accent-press:  #1730c4;
  --accent-soft:   #dfe3ff;   /* tinted fills behind accent text  */
  --on-accent:     #ffffff;

  /* the highlight — signal yellow (AI-merged fragments, "live") */
  --hi:        #ffe600;
  --hi-ink:    #0a0a0a;

  /* semantics — flat, paired with black borders */
  --green:     #00794d;  --green-soft: #c9f0dc;
  --amber:     #a85d00;  --amber-soft: #ffe6b8;
  --red:       #d8261a;  --red-soft:   #ffd9d4;

  /* ---------- STRUCTURE ---------- */
  --bw:        2px;      /* structural border weight   */
  --bw-hair:   1px;      /* hairline (row dividers)    */
  --radius:    0px;      /* brutalist: never round     */
  --shadow:    4px 4px 0 var(--ink);   /* raised / cards      */
  --shadow-sm: 2px 2px 0 var(--ink);   /* buttons / chips     */
  --shadow-lg: 7px 7px 0 var(--ink);   /* modals / focused    */

  /* spacing base = 4px grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
}

/* =========================================================================
   Semantic type classes — apply directly, or copy the rule into components.
   ========================================================================= */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.t-mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}