/* KRM brand tokens — v2.1, September 2026
   Replaces v2.1's predecessor v2.0. Green is now the MARK ONLY; orange is the
   single interface accent, at two stops. Do not add colors to this file.
   Font: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500&display=swap"> */

:root {
  /* Grounds */
  --paper: #FFFFFF;          /* every page */
  --panel: #F5F5F3;          /* alternating bands, cards */
  --hairline: #EDEDEA;       /* 1px borders on light grounds */
  --ink: #2E2E2B;            /* dark bands, primary button fill */
  --hairline-ink: #4A4A45;   /* 1px borders on the ink ground */

  /* Text on light grounds */
  --text: #2E2E2B;           /* headings and body */
  --text-soft: #5A5A54;      /* secondary text, nav, logo descriptor */
  --text-mute: #8A8A83;      /* captions, metadata */

  /* Text on the ink ground */
  --sand: #F4F0E8;           /* headings and body on ink */
  --sand-soft: #A8A49B;      /* secondary text on ink */

  /* Orange — the only interface color, two stops of one hue (~25 deg) */
  --orange: #AD4E0C;         /* on paper and panel  · 5.4:1 */
  --orange-on-ink: #F08A3C;  /* on ink only         · 5.5:1 */
  --orange-hover: #8E3F09;   /* pressed state on light grounds */

  /* The mark — identity only, never an interface color */
  --mark: #1C3A30;

  /* Type */
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-page: clamp(34px, 5vw, 56px);
  --fs-section: clamp(19px, 3vw, 24px);
  --fs-body: 15px;
  --fs-label: 12px;
  --fs-ui: 13px;

  --track-page: -0.03em;
  --track-section: -0.02em;
  --lh-body: 1.65;

  /* Layout */
  --wrap: 980px;             /* maximum content width */
  --radius: 6px;             /* all surfaces */
  --radius-chip: 5px;        /* chips only */
  --radius-pill: 999px;      /* buttons only */

  /* Motion — low intensity, never bouncing */
  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Rules this file assumes
   - Headings are Instrument Sans 500. Never bold, never a serif, never all caps.
   - Fraunces appears only inside the logo artwork. Do not load it as a webfont.
   - Sentence case everywhere. No uppercase letterspaced labels — the logo
     descriptor is the single exception and lives inside the logo files.
   - GREEN IS THE MARK ONLY. Never a link, a button, a label or a fill.
   - Orange has two stops and they are never swapped: --orange on paper and
     panel, --orange-on-ink on ink. A single value cannot clear 4.5:1 on both.
   - Orange goes on: small labels above cards, one phrase per page at most,
     links, the hover fill of outline buttons, and the chip.
     Orange never goes on: headlines, body text, backgrounds, or more than
     one thing in the same eyeful.
   - Buttons are neutral at rest. Orange is what happens when you touch one.
   - Roughly 90% neutral. No gradients, no drop shadows.
   - Honor prefers-reduced-motion. */

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; letter-spacing: var(--track-section); text-wrap: balance; }
h1 { font-size: var(--fs-page); letter-spacing: var(--track-page); line-height: 1.13; }

a { color: var(--orange); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow label above a card or section */
.eyebrow { font-size: var(--fs-label); font-weight: 500; color: var(--orange); }

/* Buttons — light grounds */
.btn-primary {
  background: var(--ink); color: var(--paper);
  font: 500 var(--fs-ui)/1 var(--sans);
  padding: 11px 24px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-secondary {
  background: transparent; color: var(--text);
  font: 500 var(--fs-ui)/1 var(--sans);
  padding: 10px 23px; border: 1px solid #D9D9D4; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-secondary:hover { background: var(--orange); border-color: var(--orange); color: var(--paper); }
.btn-secondary:active { background: var(--orange-hover); border-color: var(--orange-hover); }

/* Chip — one per page at most. Solid orange, dark text. Never a background. */
.chip {
  background: var(--orange-on-ink); color: var(--ink);
  font: 500 var(--fs-label)/1.4 var(--sans);
  padding: 5px 11px; border-radius: var(--radius-chip); display: inline-block;
}

/* Surfaces */
.surface { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); }
.panel   { background: var(--panel); border-radius: var(--radius); }

/* The ink ground — every color flips to its dark-ground value */
.on-ink { background: var(--ink); color: var(--sand); }
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--sand); }
.on-ink .secondary { color: var(--sand-soft); }
.on-ink a,
.on-ink .eyebrow { color: var(--orange-on-ink); }
.on-ink .surface { background: transparent; border-color: var(--hairline-ink); }
.on-ink .btn-primary { background: var(--sand); color: var(--ink); }
.on-ink .btn-secondary { color: var(--sand); border-color: #6B6B65; }
/* White on --orange-on-ink is only 2.5:1 — the hover label takes ink here. */
.on-ink .btn-secondary:hover { background: var(--orange-on-ink); border-color: var(--orange-on-ink); color: var(--ink); }
.on-ink :focus-visible { outline-color: var(--orange-on-ink); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}