/* ============================================================
   TETRAHEDRON SYSTEMS · DESIGN TOKENS
   v0.1 · Working Draft · TS-BG-001
   ============================================================ */

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

:root {
  /* ----- COLOR · 7 sanctioned values, no second hue ----- */
  --ths-ink:          #0A1426;  /* primary · body text on light */
  --ths-hull:         #0F1C32;  /* surface 1 · dark UI */
  --ths-steel:        #15243B;  /* surface 2 · cards on dark */
  --ths-signal:       #2563EB;  /* accent · CTA, key data */
  --ths-signal-soft:  #5B8DEF;  /* accent 2 · captions on dark */
  --ths-mist:         #E5ECF5;  /* tint · borders, dividers */
  --ths-bone:         #F7F9FC;  /* background · light surfaces */

  /* Derived */
  --ths-ink-90: rgba(10, 20, 38, 0.90);
  --ths-ink-60: rgba(10, 20, 38, 0.60);
  --ths-ink-30: rgba(10, 20, 38, 0.30);
  --ths-ink-12: rgba(10, 20, 38, 0.12);
  --ths-ink-06: rgba(10, 20, 38, 0.06);
  --ths-bone-90: rgba(247, 249, 252, 0.90);
  --ths-bone-60: rgba(247, 249, 252, 0.60);
  --ths-bone-30: rgba(247, 249, 252, 0.30);
  --ths-bone-12: rgba(247, 249, 252, 0.12);

  /* ----- SEMANTIC color roles ----- */
  --bg:           var(--ths-bone);
  --bg-raised:    #FFFFFF;
  --fg:           var(--ths-ink);
  --fg-muted:     var(--ths-ink-60);
  --fg-subtle:    var(--ths-ink-30);
  --border:       var(--ths-mist);
  --border-strong:#C8D3E2;
  --accent:       var(--ths-signal);
  --accent-soft:  var(--ths-signal-soft);

  --bg-dark:           var(--ths-ink);
  --bg-dark-raised:    var(--ths-hull);
  --bg-dark-card:      var(--ths-steel);
  --fg-dark:           var(--ths-bone);
  --fg-dark-muted:     var(--ths-bone-60);
  --fg-dark-subtle:    var(--ths-bone-30);
  --border-dark:       rgba(229, 236, 245, 0.10);
  --border-dark-strong:rgba(229, 236, 245, 0.20);

  /* ----- TYPE · families ----- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- TYPE · scale (extrapolated from PDF spec at print sizes ×1.5 for screen) ----- */
  --t-display:  84px;  /* PDF: 56pt display */
  --t-h1:       48px;  /* PDF: 32pt page title */
  --t-h2:       24px;  /* PDF: 16pt section */
  --t-body:     15px;  /* PDF: 10pt body */
  --t-body-sm:  13px;
  --t-caption:  12px;  /* PDF: 8pt mono UC label */
  --t-tech:     13px;  /* PDF: 9pt mono technical */

  /* Tracking */
  --tr-display: -0.035em;
  --tr-h1:      -0.025em;
  --tr-h2:      -0.015em;
  --tr-body:     0;
  --tr-caption:  0.14em;   /* mono UC labels */
  --tr-tech:     0.04em;   /* mono technical strings */
  --tr-wordmark: 0.18em;   /* mono UC wordmark */

  /* Leading */
  --lh-display: 0.95;
  --lh-h1:      1.0;
  --lh-h2:      1.1;
  --lh-body:    1.55;
  --lh-tech:    1.5;

  /* ----- SPACING · 4px base, no surprise values ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ----- RADIUS · restrained. Most surfaces are square. ----- */
  --r-0: 0;
  --r-1: 2px;     /* inputs, chips */
  --r-2: 4px;     /* buttons, cards */
  --r-3: 8px;     /* modals, large cards */
  --r-full: 999px;

  /* ----- ELEVATION · subtle. Hierarchy is proportion, not shadow. ----- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10, 20, 38, 0.04), 0 1px 2px rgba(10, 20, 38, 0.04);
  --shadow-2: 0 1px 0 rgba(10, 20, 38, 0.04), 0 4px 12px rgba(10, 20, 38, 0.06);
  --shadow-3: 0 2px 0 rgba(10, 20, 38, 0.04), 0 12px 32px rgba(10, 20, 38, 0.10);
  --shadow-signal: 0 0 0 4px rgba(37, 99, 235, 0.16);

  /* ----- MOTION · short, linear, no bounce ----- */
  --ease-out:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0.0, 0.8, 0.4);
  --ease-std:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --d-fast:   120ms;
  --d-base:   200ms;
  --d-slow:   400ms;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   Six levels — anything not on this list is wrong.
   ============================================================ */

.t-display, h1.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
}

.t-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  margin: 0;
}

.t-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  margin: 0;
}

.t-body, p, body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
}

.t-caption, .label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1.4;
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
}

.t-tech, code, kbd, samp {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-tech);
  line-height: var(--lh-tech);
  letter-spacing: var(--tr-tech);
}

.t-wordmark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tr-wordmark);
  text-transform: uppercase;
}

/* Base reset shared across all kit pages */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }