/* ==========================================================================
   mikee.pro — Brand tokens
   Single source of truth. Every colour, face, size and duration on the site
   derives from this file. Nothing here is decorative: each token has a role.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------
   Archivo      : workhorse, variable weight (400–800), used for body + UI
   Archivo Print Condensed : the display face. Used with restraint, uppercase.
   IBM Plex Mono: data, labels, provenance, timestamps. The instrument face.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Print Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  /* Subset to Latin plus general punctuation and converted to woff2:
     111 KB of full TTF down to 11 KB, with every glyph the site uses.
     It only ever sets uppercase display text. */
  src: url("../fonts/archivo-print-condensed-800.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
}

:root {
  /* --- Colour ------------------------------------------------------------
     Inherited from the mikee.pro identity and extended, not replaced.
     Cool green-grey paper against a deep slate ink, with pine as the single
     accent. Status colours are functional only — they always mean a state.
     ---------------------------------------------------------------------- */
  --paper: #f1f4f1;
  --panel: #fafbfa;
  --panel-2: #e9eee9;
  --ink: #17252a;
  --ink-2: #2c3b41;
  --muted: #55646a;
  /* --muted-2 is the provenance and caption grey. Held at #5f6e72 because the
     quieter value (#7b8a8d) measured 3.23:1 on paper, below AA for 11px text,
     and this grey carries the source/window lines that are the whole point of
     the brand. Quiet is not worth unreadable. */
  --muted-2: #5f6e72;
  --rule: #cdd6d2;
  --rule-soft: #dfe5e1;
  --pine: #2b5a4c;
  --pine-deep: #14332b;
  --pine-tint: #e2ebe6;
  --pine-bright: #3d7d67;

  --live: #1e7f5c;   /* state: running / verified          */
  --flag: #9a6b14;   /* state: attention / being fixed     */
  --hold: #8a3b2a;   /* state: failed / not joined         */

  --on-ink: #eef2ef;
  --on-ink-muted: #9db0aa;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Archivo Print Condensed", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--2: 0.6875rem; /* 11px — rail labels, provenance        */
  --step--1: 0.8125rem; /* 13px — captions, table data           */
  --step-0: 1.0625rem;  /* 17px — body                           */
  --step-1: 1.25rem;    /* 20px — lead paragraphs                */
  --step-2: 1.5625rem;  /* 25px — card titles                    */
  --step-3: 2.125rem;   /* 34px — sub-heads                      */
  --step-4: clamp(2.5rem, 4.6vw, 3.75rem);   /* section headings   */
  --step-5: clamp(2.9rem, 7.2vw, 6.25rem);   /* display / hero     */
  --step-6: clamp(3.4rem, 11vw, 9rem);       /* pull statements    */

  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-body: 1.62;
  --tracking-display: -0.015em;
  --tracking-label: 0.14em;

  /* --- Space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --shell: 1180px;
  --rail: 210px; /* the annotation rail: metadata, labels, section numbers */

  /* --- Edge ------------------------------------------------------------- */
  --radius: 3px;
  --radius-lg: 5px;
  --hair: 1px;

  /* --- Motion -----------------------------------------------------------
     Three durations, three curves. Nothing on this site animates without
     a job. Every transition below is either orientation (where did this
     come from) or feedback (did my input register).
     ---------------------------------------------------------------------- */
  --dur-1: 120ms; /* feedback: hover, focus, press        */
  --dur-2: 220ms; /* small transitions: menus, chips      */
  --dur-3: 620ms; /* one-off: reveals, schematic draw     */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-1: 0 1px 0 rgba(23, 37, 42, 0.04), 0 12px 28px -20px rgba(23, 37, 42, 0.28);
  --focus: 2px solid var(--pine);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

a { color: var(--pine); text-underline-offset: 3px; }
a:hover { color: var(--pine-deep); }

:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--pine-tint); color: var(--ink); }

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }