/* Source: Claude Design export — Freddie Jiang Design System (2026.10.05).
   2026.10.16: default theme re-pointed to the TraceHaus palette (#C8FF00 lime, warm black)
   and Bricolage Grotesque added for display + running text. This file is now the source of truth. */
/* =============================================================
   Freddie Jiang — Design System
   Foundations: color, type, spacing, motion
   "Form follows fabrication."
   ============================================================= */

/* ---------- Webfonts ---------- */
/* Bricolage Grotesque — TraceHaus display/text face (OFL), self-hosted, wght 200–800 + opsz */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2-variations'),
       url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Variable-ext.woff2') format('woff2-variations'),
       url('../fonts/BricolageGrotesque-Variable-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF;
}
/* JetBrains Mono — local variable font files (brand-supplied) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2'),
       url('../fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Italic-Variable.woff2') format('woff2'),
       url('../fonts/JetBrainsMono-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- COLOR ----------
     Four swappable themes, set via <html data-theme="…">.
     Default (no attribute) = ANODIZED. Every theme defines the same
     semantic tokens; components only ever read semantic tokens.
     Legibility floor: fg-4 (smallest labels) clears 4.5:1 on --bg
     in every theme. --fg-mute is for graphics only, never text. */

  /* ANODIZED (TraceHaus) — warm carbon black, glowing lime signal */
  --ink-900: #0D0D0B;
  --ink-800: #111110;
  --ink-700: #161614;
  --paper:   #EDEDEA;
  --white:   #FFFFFF;

  --bg:        #0D0D0B;
  --bg-inset:  #111110;
  --bg-hover:  #161614;
  --fg-1:      #EDEDEA;   /* primary — 17:1 */
  --fg-2:      #C6C6C0;   /* secondary — 11:1 */
  --fg-3:      #A2A29B;   /* tertiary — 7.5:1 */
  --fg-4:      #8A8A83;   /* labels — 5.4:1 */
  --fg-mute:   #4A4A45;   /* graphics only */
  --signal:    #C8FF00;
  --signal-ink:#0D0D0B;   /* text placed ON signal */
  /* Glow + wash are derived from --signal, so every finish glows in its own
     signal colour (lime, orange, yellow, red). Don't hardcode them. */
  --signal-glow: color-mix(in srgb, var(--signal) 22%, transparent);
  --signal-wash: color-mix(in srgb, var(--signal) 7%, transparent);
  --hairline:        rgba(237,237,226,0.10);
  --hairline-strong: rgba(237,237,226,0.22);
  --hairline-faint:  rgba(237,237,226,0.045);
  --hatch:     rgba(237,237,226,0.05);
  --scrim:     rgba(13,13,11,0.88);
  --scrim-0:   rgba(13,13,11,0);

  --status-ok:    #6FCF8C;
  --status-warn:  #E8B14A;
  --status-error: #E8635A;

  /* derived */
  --fg:        var(--fg-1);
  --rule:      var(--hairline);
  --rule-strong: var(--hairline-strong);
  --datum:     var(--signal);
  --signal-dim: color-mix(in oklab, var(--signal) 55%, var(--bg));

  /* ---------- TYPE — families ---------- */
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono-2:  'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-sans:    'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);   /* headings, wordmark, titles */
  --font-body:    var(--font-sans);   /* running text */
  /* Mono is now annotation only: labels, readouts, datums, figure numbers, nav. */

  /* ---------- TYPE — scale (rem-based, mono-tuned) ---------- */
  --fz-10: 0.625rem;   /* 10px — graphics/tick marks only, never running text */
  --fz-11: 0.6875rem;  /* 11px — minimum text size */
  --fz-12: 0.75rem;    /* 12px — meta */
  --fz-13: 0.8125rem;  /* 13px — body small */
  --fz-14: 0.875rem;   /* 14px — body */
  --fz-15: 0.9375rem;  /* 15px */
  --fz-16: 1rem;       /* 16px — body large */
  --fz-18: 1.125rem;   /* 18px */
  --fz-20: 1.25rem;    /* 20px — h4 */
  --fz-24: 1.5rem;     /* 24px — h3 */
  --fz-32: 2rem;       /* 32px — h2 */
  --fz-44: 2.75rem;    /* 44px — h1 */
  --fz-64: 4rem;       /* 64px — display */
  --fz-96: 6rem;       /* 96px — hero / wordmark */

  /* Tracking — mono wants slight negative; labels want positive */
  --tr-tight:   -0.01em; /* @kind font */
  --tr-normal:   0; /* @kind font */
  --tr-label:    0.06em; /* @kind font */   /* SMALL CAPS-style labels */
  --tr-readout:  0.04em; /* @kind font */   /* numeric readouts */
  --tr-wide:     0.12em; /* @kind font */   /* DATUM marks, wordmark sub */

  /* Line heights */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug:  1.25; /* @kind font */
  --lh-body:  1.6; /* @kind font */
  --lh-loose: 1.7; /* @kind font */

  /* Weights — JetBrains Mono ranges from 300-700; we use 4 */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---------- SPACING — 4px grid ---------- */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- BORDERS — hairlines, never thick ---------- */
  --bw-hair:   0.5px; /* @kind spacing */     /* default rule */
  --bw-1:      1px; /* @kind spacing */       /* default border */
  --bw-2:      2px; /* @kind spacing */       /* emphasis only */

  --radius-0:  0; /* @kind radius */         /* default — sharp corners */
  --radius-1:  2px;       /* very subtle */
  --radius-2:  4px;       /* max — for input fields */

  /* ---------- MOTION ----------
     Linear or near-linear. No bouncy easing. Instrument-feel. */
  --ease-linear:  linear; /* @kind other */
  --ease-mech:    cubic-bezier(0.2, 0.0, 0.2, 1.0); /* @kind other */   /* deliberate, mechanical */
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1.0); /* @kind other */
  --dur-1: 80ms; /* @kind other */
  --dur-2: 140ms; /* @kind other */
  --dur-3: 220ms; /* @kind other */
  --dur-4: 360ms; /* @kind other */

  /* ---------- LAYOUT — measurement grid ---------- */
  --baseline: 8px; /* @kind spacing */            /* every text aligns to 8px baseline */
  --grid-tick: 16px; /* @kind spacing */          /* hairline grid step */
  --max-w: 1280px; /* @kind spacing */
}

/* ---------- THEMES ---------- */
/* VELLUM — drafting film, graphite ink, safety-orange signal */
:root[data-theme="vellum"] {
  --ink-900: #F3F1EB; --ink-800: #EAE7DF; --ink-700: #E0DCD2; --paper: #121418;
  --bg: #F3F1EB; --bg-inset: #EAE7DF; --bg-hover: #E0DCD2;
  --fg-1: #121418; --fg-2: #30353D; --fg-3: #4E545E; --fg-4: #646A74; --fg-mute: #A9AAA6;
  --signal: #C93C0C; --signal-ink: #FFFFFF;
  --signal-glow: color-mix(in srgb, var(--signal) 14%, transparent);
  --signal-wash: color-mix(in srgb, var(--signal) 6%, transparent);
  --hairline: rgba(18,20,24,0.13); --hairline-strong: rgba(18,20,24,0.28); --hairline-faint: rgba(18,20,24,0.05);
  --hatch: rgba(18,20,24,0.06); --scrim: rgba(243,241,235,0.9); --scrim-0: rgba(243,241,235,0);
  --status-ok: #2F7D4A; --status-warn: #9A6400; --status-error: #B3261E;
}
/* BLUEPRINT — cyanotype blue, pencil-yellow signal */
:root[data-theme="blueprint"] {
  --ink-900: #0D2B4C; --ink-800: #11335A; --ink-700: #163C68; --paper: #F2F7FC;
  --bg: #0D2B4C; --bg-inset: #11335A; --bg-hover: #163C68;
  --fg-1: #F2F7FC; --fg-2: #CCDBEC; --fg-3: #A9C1DD; --fg-4: #86A4C8; --fg-mute: #3E6591;
  --signal: #FFC94A; --signal-ink: #0D2B4C;
  --hairline: rgba(220,235,255,0.14); --hairline-strong: rgba(220,235,255,0.30); --hairline-faint: rgba(220,235,255,0.06);
  --hatch: rgba(220,235,255,0.06); --scrim: rgba(13,43,76,0.88); --scrim-0: rgba(13,43,76,0);
}
/* CARBON — neutral black, tool-red signal */
:root[data-theme="carbon"] {
  --ink-900: #121212; --ink-800: #1A1A1A; --ink-700: #232323; --paper: #F2F0ED;
  --bg: #121212; --bg-inset: #1A1A1A; --bg-hover: #232323;
  --fg-1: #F2F0ED; --fg-2: #CFCBC5; --fg-3: #ABA69F; --fg-4: #8E8982; --fg-mute: #4A4744;
  --signal: #FF5A36; --signal-ink: #121212;
  --hairline: rgba(255,255,255,0.10); --hairline-strong: rgba(255,255,255,0.22); --hairline-faint: rgba(255,255,255,0.045);
  --hatch: rgba(255,255,255,0.05); --scrim: rgba(18,18,18,0.88); --scrim-0: rgba(18,18,18,0);
}

/* ---------- BASE ELEMENTS ---------- */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fz-15);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv02', 'zero', 'ss02';  /* JBM stylistic sets */
}

* { box-sizing: border-box; }

/* ---------- SEMANTIC TYPE ---------- */

.t-display, h1.display {
  font-family: var(--font-mono);
  font-weight: var(--fw-light);
  font-size: var(--fz-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

h1, .t-h1 {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fz-44);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fz-32);
  line-height: 1.15;
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fz-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fz-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fz-15);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.t-body-lg {
  font-size: var(--fz-16);
  line-height: var(--lh-body);
}

.t-body-sm {
  font-size: var(--fz-13);
  line-height: var(--lh-body);
}

/* Labels — uppercase, tracked, used to mark fields, sections, datums */
.t-label, label.t-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fz-12);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Readout — numeric values, dimensions, measurements */
.t-readout {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fz-13);
  letter-spacing: var(--tr-readout);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.t-readout-lg {
  font-family: var(--font-mono);
  font-weight: var(--fw-light);
  font-size: var(--fz-32);
  letter-spacing: var(--tr-readout);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

/* Datum — tracked-out, very small caps, used for crosshair labels */
.t-datum {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fz-11);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--datum);
}

code, kbd, pre, .t-code {
  font-family: var(--font-mono);
  font-size: var(--fz-13);
  color: var(--fg-1);
}

/* ---------- UTILITY ---------- */
.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-4 { color: var(--fg-4); }
.fg-datum { color: var(--datum); }

.rule    { border-top: var(--bw-hair) solid var(--rule); }
.rule-y  { border-left: var(--bw-hair) solid var(--rule); }

/* Hairline grid background — 16px tick */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--hairline-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline-faint) 1px, transparent 1px);
  background-size: var(--grid-tick) var(--grid-tick);
}

/* Datum crosshair — used in compositions */
.datum-mark {
  display: inline-block;
  width: 12px; height: 12px;
  position: relative;
}
.datum-mark::before, .datum-mark::after {
  content: '';
  position: absolute;
  background: var(--datum);
}
.datum-mark::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.datum-mark::after  { left: 50%; top: 0; bottom: 0; width: 1px;  transform: translateX(-50%); }