/* ==========================================================================
   Oakes Consulting design tokens

   Source of truth: oakes-consulting/02-brand-and-identity/Design-System.md
   Palette and type locked 2026-09-01.

   Two hard rules from the palette, enforced by how these tokens are used:

     1. Steel and brass never touch. They measure 1.29 apart in brightness,
        so one layered on the other is unreadable. Both only ever meet the
        ground or a surface. An offset plate may be steel; it may never be
        brass behind a steel panel.

     2. Brass is never small text. It measures 4.10 on the base, below the
        4.5 AA needs. Brass is rules, markers, rings, and display text at
        24px and above. Links and small labels are always steel.

   Do not darken the brass to "fix" rule 2. Deepening it moves brass toward
   steel and takes the adjacency from 1.29 to 1.01, making rule 1 worse.
   ========================================================================== */

:root {
  /* ---- color ---- */
  /* Swapped 2026-09-01 at Ryan's call: the lighter tone is now the page
     ground and the quarry grey is the raised panel. Re-measured, and it
     improves things: on the lighter ground every pair clears AA, including
     brass at 4.60 where it previously failed at 4.10. Rule 2 still stands
     unchanged, because brass on the grey panel is still 4.10. */
  --base:       #F3F6F8;   /* page ground */
  --surface:    #E6E9EC;   /* raised panels, the header when scrolled */
  --ink:        #14171A;
  --secondary:  #5D646A;
  --steel:      #366381;
  --brass:      #8A6B21;

  /* Steel darkened for hover. Measured 7.13 on base, clears AAA. */
  --steel-deep: #2B4F67;

  --hairline:        rgba(20, 23, 26, 0.13);
  --hairline-strong: rgba(20, 23, 26, 0.22);
  /* On the inverted footer the hairline has to invert too. */
  --hairline-invert: rgba(230, 233, 236, 0.18);

  /* ---- type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fraunces carries SOFT and WONK axes. Generated sites never touch variable
     axes, so using them deliberately is cheap differentiation. SOFT rounds the
     terminals slightly; WONK swaps in the alternate splayed forms. Held low so
     it reads as a considered cut rather than a novelty. */
  --display-axes: "SOFT" 28, "WONK" 1;

  /* ---- the spine ----
     One page-level grid with named lines, replacing a fixed container. Every
     block chooses its own reach: content, popout, feature, or full. The gutter
     holds constant past 1024px and the outer tiers absorb the extra width, so a
     wide monitor is used rather than left as empty margin. */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --content: min(64ch, 100% - var(--gutter) * 2);
  --popout:  minmax(0, 6rem);
  --feature: minmax(0, 14rem);
  --edge:    minmax(var(--gutter), 1fr);

  /* ---- spacing, 8pt ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --section-pad: clamp(3.25rem, 6vw, 5.5rem);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-mid:  320ms;
}

/* Two breakpoints above tablet, at 1440 and 1920. IDEO, Base Design and
   Instrument independently use this same pair. The feature and popout tiers
   widen; the prose measure deliberately does not, because long lines are
   unreadable no matter how much room exists. */
@media (min-width: 1440px) {
  :root {
    --popout:  minmax(0, 8rem);
    --feature: minmax(0, 20rem);
  }
}

@media (min-width: 1920px) {
  :root {
    --popout:  minmax(0, 10rem);
    --feature: minmax(0, 28rem);
  }
}

/* The site commits to a single light visual world on purpose. The palette was
   contrast-measured against a light ground and those values do not carry over
   to a dark one. Dark mode is an open decision in the design system. Colors are
   painted explicitly so the page holds regardless of host or browser theme. */