/* ==========================================================================
   tokens.css — design tokens
   Single source of truth for color, type, space, and motion.

   Continuity note: the plum accent, the ginger spark, the slate ink and the
   near-square corners are all carried forward from the 2010–2024 site. They
   are kept because they are already hers — and because nobody else's
   portfolio is plum.

   Type is a three-voice system, all from the OS. No webfont, no network
   request, no layout shift:
     display  serif  — headlines and numbers. Carries the editorial weight.
     ui       sans   — running text and controls. Gets out of the way.
     mono            — eyebrows, labels, metadata. The engineering voice.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Ink · slate, never pure black ----------------------------------- */
  --ink:        #151E27;   /* 16.3:1 — headings, primary text */
  --ink-2:      #465A67;   /*  7.2:1 — body copy; the 2010 site's exact ink */
  --ink-3:      #60727C;   /*  5.0:1 on paper, 4.5:1 on panel — captions and meta */
  --ink-4:      #A9B8C1;   /*  2.4:1 — hairlines and disabled only */

  /* --- Ground · cool, tuned to sit under the illustrations ------------- */
  --paper:      #FFFFFF;
  --paper-2:    #FAFBFC;
  --panel:      #F1F4F6;   /* screenshot beds, diagram fills */
  --panel-2:    #E4EAEE;   /* nested fills */
  --rule:       #DBE2E7;

  /* --- Plum · the accent. Links, focus, emphasis. ---------------------- */
  --accent:       #8F519A;  /* 5.5:1 — safe as body text */
  --accent-deep:  #70337B;  /* 8.6:1 — hover, small text, focus ring */
  --accent-wash:  #F6F0F8;
  --accent-edge:  #E0CFE5;

  /* --- Ginger · the spark. Once per page. Never twice. ----------------- */
  --spark:      #F26101;   /* 3.3:1 — large text and non-text only */
  --spark-deep: #B94A00;   /* 5.2:1 — safe as text */

  /* --- Type ------------------------------------------------------------
     Three voices, all resident on the OS: zero external requests, no cookie
     banner, no CLS. --font-display resolves to Iowan Old Style on macOS,
     Palatino Linotype on Windows, Georgia everywhere else — all of which are
     humanist old-style serifs with a similar color on the page.
     --------------------------------------------------------------------- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, "Times New Roman", serif;
  --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-display: clamp(2.75rem, 1.5rem + 4.6vw, 5.25rem);
  --fs-h1:      clamp(1.6rem, 1.12rem + 1.6vw, 2.4rem);
  --fs-h2:      clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-h3:      clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  --fs-lead:    clamp(1.125rem, 1.03rem + 0.42vw, 1.4rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-meta:    0.875rem;
  --fs-eyebrow: 0.6875rem;

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.65;

  --track-eyebrow: 0.14em;   /* mono needs a little more air than sans */
  --track-display: -0.012em; /* a serif wants far less negative than a sans */

  /* --- Space (4px base) ------------------------------------------------ */
  --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;

  /* Section rhythm, fluid */
  --section: clamp(4rem, 2rem + 7vw, 8.5rem);

  /* --- Measure & layout ------------------------------------------------ */
  /* One reading column, in rem. It has to be rem: ch resolves against each
     element's own font size, so a 20px lead and a 17px paragraph capped at the
     same ch value land on different pixel widths and never line up. */
  --measure:      68rem;
  --measure-lead: 68rem;
  --measure-note: 68rem;
  --shell:        1240px; /* page max width */
  --shell-wide:   1440px;
  --gutter:       clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* --- Radius, border, elevation ---------------------------------------
     Near-square. This is the 2010 site's signature and the fastest way to
     stop looking like a component library's default card. --r-pill is kept
     for tags only.
     --------------------------------------------------------------------- */
  --r-sm: 1px;
  --r-md: 2px;
  --r-lg: 3px;
  --r-pill: 999px;

  --border: 1px solid var(--rule);

  /* Elevation is used sparingly — never inside a diagram. */
  --shadow-2: 0 14px 34px -16px rgba(21, 30, 39, 0.22);

  /* --- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring: 2px solid var(--accent-deep);
  --focus-offset: 3px;

  /* --- Header ----------------------------------------------------------- */
  --header-h: 68px;
}

/* Forced-colors / High Contrast: let the OS win, but keep structure. */
@media (forced-colors: active) {
  :root {
    --rule: CanvasText;
    --shadow-2: none;
  }
}