/* Techholden — brand tokens, v2
   7 September 2026. Black / Grey / Blue supersedes Graphite & Azure, and
   Montserrat supersedes the Archivo + Inter pair. Three colours, one family.

   Contrast ratios are measured, not assumed, against the two shipping grounds
   (Black #000000 and Paper #FFFFFF):
     grey  #838B98  6.11 on black · 3.44 on paper  → dark grounds only as text
     blue  #3A6FB5  4.12 on black · 5.10 on paper  → paper text, dark marks only
   Which is why each of the two carries a ground-matched sibling below. */

:root{
  /* ---- Colour: the three the brand sheet names ---- */
  --th-black:  #000000;  /* PRIMARY   — the dark ground, and text on paper */
  --th-grey:   #838B98;  /* SECONDARY — `holden`, and text on black       */
  --th-blue:   #3A6FB5;  /* ACCENT    — the dot, the beam, marks, fills   */
  --th-paper:  #FFFFFF;  /* the light ground, and text on black or blue   */

  /* ---- The two ground-matched siblings ----
     Neither of the brand values carries running text on both grounds. Blue is
     4.12 on black, grey is 3.44 on paper: both are marks-and-display at those
     pairings. These keep the hue and move only lightness, so the brand reads
     as one colour while the text stays AA. */
  --th-blue-lift: #4279C2;  /* blue as text on black  (4.75:1, AA) */
  --th-grey-deep: #5D646F;  /* grey as text on paper (5.97:1) and on the wash
                               band (5.37:1) — the tinted grounds, not paper,
                               are what decide it */

  /* ---- Derived surfaces. No new hues: every one is black, paper or blue
     mixed with one of the others, so the palette stays at three. ---- */
  --th-raised: #101114;   /* raised surface on the black ground   */
  --th-line:   #23262B;   /* hairlines on the black ground        */
  --th-wash:   #F1F3F6;   /* the pale band on paper — blue at 6%  */
  --th-mist:   #E4E8EE;   /* hairlines on the wash                */

  /* ---- Status. Muted, so they read as state and never compete with the
     accent. Each is AA on both grounds it is used on. ---- */
  --th-good:   #3F7D57;
  --th-warn:   #8A6410;
  --th-bad:    #B3392E;
  --th-good-lift: #6FBF8D;
  --th-warn-lift: #D2A23F;
  --th-bad-lift:  #E4796C;

  /* ---- Type. One family, Montserrat, self-hosted. The brand sheet sets the
     wordmark in it too, so the Inter exception the old pack carried is gone. */
  --th-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --th-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --th-wordmark-weight: 700;
  --th-wordmark-tracking: -0.005em;  /* Montserrat sets wide; the mark closes it a hair */

  /* ---- Type scale, from the brand sheet's four named steps
     (display 48/52, heading 36/40, body 16/24, small 12/16) ---- */
  --th-display: 48px;
  --th-h1:      36px;
  --th-h2:      28px;
  --th-h3:      22px;
  --th-body:    16px;
  --th-small:   12px;

  /* ---- Spacing (8pt base) ---- */
  --th-space-1: 8px;
  --th-space-2: 16px;
  --th-space-3: 24px;
  --th-space-4: 48px;
  --th-space-5: 88px;

  --th-radius: 14px;

  /* ---- Compatibility aliases ----
     The site and the generated assets were written against the v1 names. These
     keep every old reference resolving to the v2 value rather than to nothing,
     so a missed reference degrades to the right colour instead of to black.
     New code uses the names above. */
  --th-ink:        var(--th-black);
  --th-slate:      var(--th-raised);
  --th-azure:      var(--th-blue);
  --th-azure-lift: var(--th-blue-lift);
  --th-azure-deep: var(--th-blue);
  --th-steel:      var(--th-grey);
  --th-mute:       var(--th-grey);
  --th-mute-lt:    var(--th-grey-deep);
}

/* ---- Accent by ground ---- *
   Blue core is the brand value: the dot, the beam, display type above 24px.
   As running text it needs the ground-matched value — core alone is 4.12 on
   black, which is marks-and-display only. On paper the core clears AA at 5.10
   and is used unchanged. */
.th-accent-text{ color: var(--th-blue); }               /* light grounds */
.th-on-dark .th-accent-text{ color: var(--th-blue-lift); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .th-accent-text{ color: var(--th-blue-lift); }
}
:root[data-theme="dark"] .th-accent-text{ color: var(--th-blue-lift); }

/* ---- The wordmark ---- *
   Always three parts. `tech` carries full strength, `holden` recedes in the
   brand grey, the dot is blue. NEVER render flat in one colour: the double-h
   collapses into an illegible "chh" run below ~18px. */
.th-wordmark{
  font-family: var(--th-sans);
  font-weight: var(--th-wordmark-weight);
  letter-spacing: var(--th-wordmark-tracking);
  line-height: 1;
  white-space: nowrap;
  color: var(--th-grey);          /* "holden" — recedes */
}
.th-wordmark .th-a{ color: var(--th-paper); }   /* "tech" — full strength, dark ground  */
.th-wordmark .th-dot{ color: var(--th-blue); }  /* the dot                              */

/* On light surfaces */
.th-wordmark--light .th-a{ color: var(--th-black); }

/* One colour — 58%, no second hue. Works on any single-ink ground. */
.th-wordmark--tonal{ color: color-mix(in srgb, currentColor 58%, transparent); }
.th-wordmark--tonal .th-a,
.th-wordmark--tonal .th-dot{ color: currentColor; }

/* On blue: the dot goes paper — blue on blue disappears. The class keeps its v1
   name so nothing that already uses it breaks; `azure` here means the accent. */
.th-wordmark--on-azure{ color: #C6D8EF; }
.th-wordmark--on-azure .th-a,
.th-wordmark--on-azure .th-dot{ color: var(--th-paper); }

/* The beam — part of the logo. Exactly the width of `tech`, never past the seam.
   Away from the wordmark, at other widths, it doubles as page furniture. */
.th-beam{ height: 0.095em; background: var(--th-blue); border-radius: 2px; }
.th-beamlock{ display: block; width: fit-content; }
.th-beamlock .th-ghost{ display: block; height: 0; overflow: hidden;
  font-weight: var(--th-wordmark-weight); letter-spacing: var(--th-wordmark-tracking); line-height: 1; }
.th-beamlock .th-beam{ width: 100%; }