/* Techholden — brand tokens
   Final, 15 August 2026. Azure supersedes Rust. Contrast ratios computed to WCAG 2.1
   against the shipping grounds (Ink #0B0E11, Slate #1E242B, Paper #F7F6F3). */

:root{
  /* ---- Colour: Graphite & Azure ---- */
  --th-ink:      #0B0E11;  /* primary dark surface                  */
  --th-slate:    #1E242B;  /* raised dark surface                   */
  --th-line:     #2A323B;  /* hairlines, borders                    */
  --th-paper:    #F7F6F3;  /* primary light surface / text on dark  */
  --th-azure:      #1E6FD9; /* accent, the brand value — the mark, marks only on text  */
  --th-azure-lift: #4C8DE8; /* the accent as text on dark grounds  (Ink 5.79:1, AA)   */
  --th-azure-deep: #1A5FBC; /* the accent as text on light grounds (Paper 5.70:1, AA) */
  --th-steel:    #4A7DA8;  /* secondary accent                      */
  --th-grey:     #828B98;  /* the wordmark grey — `holden`, both grounds (Ink 5.62:1) */
  --th-mute:     #8A949E;  /* secondary text on dark                */
  --th-mute-lt:  #63605A;  /* secondary text on light (5.80:1)      */

  /* ---- Status ---- */
  --th-good:     #7FA87F;
  --th-warn:     #D9A441;
  --th-bad:      #D4635A;

  /* ---- Type ---- */
  --th-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --th-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --th-wordmark-weight: 750;
  --th-wordmark-tracking: 0;   /* the typeface's own spacing, at every size */

  /* ---- Type scale (1.25) ---- */
  --th-display: 39px;
  --th-h1:      31px;
  --th-h2:      25px;
  --th-h3:      20px;
  --th-body:    16px;
  --th-small:   12.8px;

  /* ---- 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;
}

/* ---- Accent by ground ---- *
   Azure 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 3.99 on Ink
   and 4.49 on Paper, which is marks-and-display only, the same limit Rust had.
   Splitting by ground is what buys the accent the right to carry real text. */
.th-accent-text{ color: var(--th-azure-deep); }        /* light grounds */
.th-on-dark .th-accent-text{ color: var(--th-azure-lift); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .th-accent-text{ color: var(--th-azure-lift); }
}
:root[data-theme="dark"] .th-accent-text{ color: var(--th-azure-lift); }

/* ---- The wordmark ---- *
   Always three parts. `tech` carries full strength, `holden` recedes in the
   brand grey, the dot is Azure. 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-azure); }  /* the dot                              */

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

/* 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 Azure: the dot goes Paper — Azure on Azure disappears. */
.th-wordmark--on-azure{ color: #C3D9F6; }
.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-azure); 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%; }