/* ============================================================
   INTERSTATE MEDICINE — BRAND TOKENS
   One file. Both properties. 17 August 2026.

   WHY THIS FILE EXISTS

   Before it, the free site inlined its stylesheet into every page and
   there were FIVE different copies:

       courses.html        64,603 bytes   (its own)
       index/faq/contact   43,692 bytes   (shared between three)
       enterprise.html     31,780 bytes   (its own)
       pro_landing.html    26,916 bytes   (its own)
       privacy/terms        ~7,000 each

   287KB of CSS shipped where 187KB would do — 35% pure duplication.
   Worse, a palette change meant editing five copies and hoping, which
   is exactly how a site ends up half-rebranded.

   The values here are IDENTICAL to the Pro app's src/styles/tokens.css.
   That is the whole point: the two properties cannot drift, because
   there is one set of numbers.

   ------------------------------------------------------------
   THE PALETTE, AND WHY EACH VALUE
   ------------------------------------------------------------
   The accent was #0d6e5c for about an hour. It measured hue 169 degrees
   at 79% saturation — nearly twice as saturated as anything else in the
   palette (brass 47%, status green 45%, the retired slate 20%) and its
   hue sat in teal-cyan rather than green. It did not belong to the same
   family, and a high-chroma mid-tone vibrates against white no matter
   what its luminance ratio says. WCAG passed it at 6.17:1; the eye did
   not. The eye was right.

   #2c5f63 is 38% saturated and sits 6 degrees from the ink, so a
   full-bleed dark section reads as one continuous deep field.

   ACCESSIBILITY: every text pairing below was audited. 12 of 12 pass
   WCAG AA. Two values moved to get there and both were failing before:
       brass  #b0813f -> #8a6428   3.2:1 -> 4.9:1 on paper
       ink-3  #7d8b8c -> #61706f   3.2:1 -> 4.8:1 on paper
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --paper: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #efece5;

  /* ---- ink ---- */
  --ink: #101a1c;
  --ink-2: #4a595b;
  --ink-3: #61706f;          /* 4.8:1 on paper — was 3.2:1, below AA */
  --line: rgba(16, 26, 28, 0.09);
  --line-2: rgba(16, 26, 28, 0.15);

  /* ---- accent: slate teal ---- */
  --accent: #2c5f63;
  --accent-600: #245255;
  --accent-700: #1f4a4d;
  --accent-wash: #e9eeee;
  --accent-ink: #1f4a4d;
  /* For type ON the ink. The base accent is too dark there; this is
     7.6:1 against #101a1c. */
  --accent-light: #7fb3b6;

  /* ---- brass: NUMERALS ONLY ----
     A figure set in brass reads as data. Brass on prose makes the page
     look decorated, so it is reserved for stat counts, prices and
     dates. */
  --brass: #8a6428;          /* 4.9:1 on paper — was 3.2:1, below AA */
  --brass-wash: #f6efe3;

  /* ---- status SURFACES ----
     Muted on purpose: these sit under text in a badge or a wash. They
     are the wrong choice for a signal — see the triad below. */
  --teal: #2c5f63;
  --teal-wash: #e9eeee;
  --teal-ink: #1f4a4d;
  --amber: #8a6428;
  --amber-wash: #f6efe3;
  --amber-line: #e8d9bd;
  --amber-ink: #7d5a26;
  --red: #a03a30;
  --red-wash: #f8ebe9;
  --red-ink: #7a2a22;
  --red-line: #eed3cf;

  /* ---- status SIGNALS ----
     A dot has one job: be seen across a page at a glance. The surface
     tones above are too quiet for that, which is why saturated values
     kept appearing as hard-coded fallbacks in the app's CSS — the
     stylesheet was compensating for a gap in the palette. Closed here. */
  --signal-alert: #b4362f;
  --signal-warn: #b8791f;
  --signal-good: #2f7d54;

  /* ---- type ----
     --disp is for HEADINGS and FIGURES only. At small sizes a display
     serif keeps the weight distribution it has at 40px, so it reads
     heavy and sits badly against the sans around it. Twenty rules in
     the Pro app were breaking this before it was written down. */
  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- scale ----
     rem throughout so browser zoom and the reading-size control both
     work. Nothing below --fs-xs; that is the accessibility floor. */
  --fs-xs: 0.875rem;    /* 14px — floor, do not go below */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px — body */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.375rem;   /* 38px */
  --fs-page: 2.5rem;    /* 40px — page headings */
  --fs-hero: 3.5rem;    /* 56px — marketing hero only */

  /* ---- geometry ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 26, 28, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 26, 28, 0.07);

  /* ---- marketing rhythm ----
     The free site breathes more than the application does. A visitor
     reads a page once; a member works in one weekly. */
  --sec-pad: 88px;
  --sec-pad-tight: 62px;
}

@media (max-width: 720px) {
  :root {
    --fs-hero: 2.5rem;
    --fs-page: 2rem;
    --sec-pad: 56px;
    --sec-pad-tight: 44px;
  }
}

/* ============================================================
   COMPATIBILITY ALIASES

   The old inlined :root defined 34 names the pages still reference.
   They are kept so nothing breaks, but they RESOLVE TO THE NEW PALETTE
   rather than preserving the old values — otherwise the rebrand lands
   half-applied and 61 pages keep the retired slate.

   --serif, --ok/--warn/--crit and the --s1..--s5 planner series are the
   ones that matter: they are used heavily on courses.html and the state
   pages. Mapping them is what makes those pages actually change colour.
   ============================================================ */
:root {
  /* status families, mapped onto the new tones */
  --ok: var(--signal-good);
  --ok-ink: var(--teal-ink);
  --ok-wash: var(--teal-wash);
  --warn: var(--amber);
  --warn-ink: var(--amber-ink);
  --warn-wash: var(--amber-wash);
  --crit: var(--red);
  --crit-ink: var(--red-ink);
  --crit-wash: var(--red-wash);

  /* the planner's categorical series — accent, then a spread that
     stays inside the palette rather than five unrelated hues */
  --s1: var(--accent);
  --s2: var(--signal-good);
  --s3: var(--brass);
  --s4: var(--ink-2);
  --s5: var(--red);

  /* dark surfaces: the ink family replaces the retired navy */
  --navy-900: var(--ink);
  --navy-800: #1a2a2d;
  --navy-700: #24393c;
  --sky: var(--accent-light);
  --violet: #6a6478;

  /* type aliases — --serif is the old name for the display face */
  --serif: var(--disp);
  --fs-4xl: 2.125rem;
  --fs-5xl: 2.75rem;

  /* geometry aliases */
  --r-sm: var(--radius-sm);
  --r-md: var(--radius);
  --r-lg: 20px;
  --radius-md: var(--radius);
  --radius-lg: 20px;
  --shell: 1140px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* elevation aliases */
  --elev-sm: var(--shadow-sm);
  --elev: var(--shadow-md);
  --elev-lg: 0 34px 90px -28px rgba(16, 26, 28, .34);
  --shadow: var(--shadow-sm);
  --shadow-lg: 0 18px 46px -26px rgba(16, 26, 28, .24), 0 2px 8px rgba(16, 26, 28, .05);
}