/* ============================================================
   THINKING SCHEMATICS — Color & Type Foundations
   white page. red mark. black words. that's the whole thing.
   ============================================================ */

/* Fonts.
   Atkinson Hyperlegible Next — self-hosted from fonts/ (brand files, variable).
   Figtree + JetBrains Mono — Google Fonts CDN (no local files supplied; CDN is fine). */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Color: raw tokens ---- */
  --brand:      #E63329;            /* the mark. the i-dots. nothing else. */
  --ink:        #000000;            /* all type, all rules, all chrome — and press/active */
  --ink-hover:  #2A2A2A;            /* gray: hover lift on black surfaces */
  --paper:      #FFFFFF;            /* the canvas — default bg everywhere */
  --paper-2:    #F5F5F5;            /* subtle section separation, sparingly */
  --rule:       rgba(0,0,0,0.12);   /* hairlines, dividers */
  --mute:       rgba(0,0,0,0.58);   /* secondary text, metadata, captions */
  --grid-line:  #E8E8E8;            /* engineering paper-grid line (light gray) */
  --grid-size:  40px;               /* paper-grid cell */

  /* ---- Color: semantic aliases ---- */
  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --fg:         var(--ink);
  --fg-muted:   var(--mute);
  --accent:     var(--brand);
  --accent-press: var(--ink);       /* press/active = black, never a second red */
  --border:     var(--rule);

  /* ---- Type families ---- */
  --font-display: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Figtree', system-ui, sans-serif;
  --font-body:    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Figtree', system-ui, sans-serif;
  --font-alt:     'Figtree', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (1rem = 16px) ---- */
  --fs-hero:  clamp(40px, 6vw, 88px);
  --fs-h1:    48px;
  --fs-h2:    32px;
  --fs-h3:    22px;
  --fs-body:  17px;
  --fs-small: 13px;

  --lh-hero:  0.95;
  --lh-h1:    1.05;
  --lh-h2:    1.1;
  --lh-body:  1.55;
  --lh-small: 1.5;

  --tr-tight:  -0.02em;   /* hero, h1, wordmark */
  --tr-h2:     -0.015em;
  --tr-label:   0.08em;   /* mono labels, uppercase */

  /* ---- Layout ---- */
  --margin-page: 48px;    /* min screen margin */
  --gutter:      24px;    /* 12-col grid gutter */
  --maxw:        1200px;

  /* ---- Borders (no radius by default — this brand is square) ---- */
  --radius:      0px;
  --radius-mark: 50%;
  --hair:        1px solid var(--ink);     /* the canonical rule */
  --hair-soft:   1px solid var(--rule);
}

/* ============================================================
   Semantic element styles — apply via classes or @extend
   ============================================================ */

.ts-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-tight);
  text-transform: lowercase;   /* headlines are always lowercase */
  color: var(--fg);
  text-wrap: balance;
}

.ts-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-tight);
  text-transform: lowercase;
  color: var(--fg);
}

.ts-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  text-transform: lowercase;
  color: var(--fg);
}

.ts-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg);
}

.ts-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.ts-mute {
  color: var(--fg-muted);
}

.ts-label,
.ts-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--tr-label);
  color: var(--fg-muted);
}

.ts-label {
  text-transform: uppercase;
}

/* The red i-dot helper — wrap the tittle's letter and use ::after,
   or simply color a <span class="ts-dot">.</span> */
.ts-red { color: var(--brand); }

/* Canonical rule / hairline */
.ts-rule { border: none; border-top: var(--hair); height: 0; }
.ts-rule--soft { border-top: var(--hair-soft); }

/* ============================================================
   Paper grid — the engineering-notebook background motif.
   A 40px grid of 1px light-gray lines on white. Use occasionally,
   for "schematic document" surfaces (spec sheets, diagram pages).
   Pair with a soft shadow only when the page floats on #F4F4F4.
   ============================================================ */
.ts-paper-grid {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
/* The floating "page" on a neutral desk — the only sanctioned soft shadow. */
.ts-paper-page {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 30px rgba(0,0,0,0.06);
}