/* ============================================================================
   Surgical Ink: the whole palette, in one place.

   These lived copy-pasted in four files. They live here now, so a colour is
   changed once rather than four times and the pages cannot drift apart.

   Dark is the ground state. Light is an override the visitor opts into with
   the header toggle on the older pages, kept in localStorage["khd-theme"] and
   restored by a tiny inline script before first paint.
   ========================================================================== */

/* Instrument Serif, self-hosted. Two faces, ~15KB each, latin only. A
   high-contrast editorial serif rather than another geometric grotesk: the
   page is one long argument made by a person, and it should read like a
   statement, not like a dashboard. swap means text paints immediately in the
   fallback and never blocks the video. */
@font-face{
  font-family:"Instrument Serif";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/instrument-serif-regular-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  font-style:italic; font-weight:400; font-display:swap;
  src:url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* The named palette. Referenced by the role tokens below, never used direct. */
  --porcelain:#F7F8F7;
  --ink:#0E1012;
  --viridian:#0E5F4C;
  --mint:#5FBF9E;
  --steel:#8A9290;
  --hairline:#E2E5E3;

  /* Roles, dark ground. Panels are lifted off the ink rather than bordered
     into existence, which is what keeps the pages from looking like a form. */
  --bg:var(--ink);
  --panel:#161a1d;
  --panel-2:#1d2225;
  --text:var(--porcelain);
  --muted:var(--steel);
  --faint:#7A817F;      /* AA on ink at 11px: 4.8:1. Do not darken. */
  --line:#242a2d;
  --line-2:#313739;

  /* One accent. Mint carries every call to action and every live state;
     viridian is for large fills and hovers underneath it. Mint is never put
     on viridian: on dark, mint sits on ink, and ink sits on mint. */
  --accent:var(--mint);
  --accent-deep:var(--viridian);
  --accent-deeper:#0B4C3D;
  --on-accent:#08130C;
  --accent-soft:rgba(95,191,158,.14);
  --accent-line:rgba(95,191,158,.40);

  --display:"Instrument Serif",Iowan Old Style,"Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --maxw:1120px;
  --measure:62ch;

  color-scheme:dark;
}

:root[data-theme="light"]{
  /* The same cream the client portal runs on (KH.OS), not a generic white
     light mode invented separately for the marketing site. Someone who books
     a call here and later opens their client portal is looking at one system,
     not two that happen to share a font. Warm ink and a warm body colour go
     with it rather than the site's own cool near-black -- a cool grey on a
     warm cream is the thing that would have made this look like "white mode
     with a tint" instead of an actual second ground. */
  --bg:#E0D7C4;
  --panel:#E9E2D1;
  --panel-2:#F0EADC;
  --text:#191408;
  --muted:#463E2C;
  --faint:#463E2C;       /* one tone, same as KH.OS -- it has no separate tier here either */
  --line:#D0C5AC;
  --line-2:#C4B89C;

  /* Viridian, matched to KH.OS's --live rather than the site's own slightly
     different green -- close enough before that nobody would have flagged it
     side by side, but "like my operator os" means the same value, not a near
     miss. */
  --accent:#0C5E34;
  --accent-deep:#094D2A;
  --accent-deeper:#073D22;
  --on-accent:#FFFFFF;
  --accent-soft:rgba(12,94,52,.09);
  --accent-line:rgba(12,94,52,.28);

  color-scheme:light;
}