/* ============================================================
   tokens.css — Design tokens for lawrencengo.com

   What:  CSS custom properties that define color, type, spacing,
          and animation primitives. Two themes coexist on every
          page: Editorial (default, warm cream + serif) and
          Systems (dark navy + Geist). Toggle via the [data-theme]
          attribute on <html>.
   Why:   Single source of truth so a token change propagates
          everywhere. Previously, these were duplicated in each
          page's inline <style> block, which meant we had to chase
          drift manually.
   Used:  Linked by every top-level page in /site/ via:
          <link rel="stylesheet" href="/assets/css/tokens.css">
          Page-specific styles below this file in the cascade can
          override individual tokens if a page needs a tweak.
   Notes: Color values come from the home page (the canonical
          source of truth per CLAUDE.md §10.2). Other pages have
          historically had slight variants (e.g. --max: 1340px on
          non-home pages); they're now standardized to home's
          values. See Maintenance log in CLAUDE.md for the
          consolidation date.
   See:   CLAUDE.md §6 "Design system" for the full reference.
   ============================================================ */

/* ============================================================
   GLOBAL TOKENS — apply regardless of theme
   ============================================================ */
:root {
  --max: 1320px;       /* Max width for .container at the largest breakpoint */
  --gutter: 32px;      /* Horizontal padding inside .container */
}

/* ============================================================
   EDITORIAL THEME — default, warm-cream + serif aesthetic
   ============================================================ */
:root[data-theme="editorial"] {
  /* Surface */
  --bg: #f5f3ee;
  --bg-elev: #ede9e2;
  --bg-card: #ede9e2;

  /* Type */
  --ink: #15171a;
  --ink-soft: #45484e;
  --ink-muted: #898b8e;

  /* Hairlines */
  --rule: #d4d2cc;
  --rule-strong: #c2c0b9;

  /* Brand accent — warm forest green */
  --accent: #2d5a3d;
  --accent-2: #2d5a3d;

  /* Fonts — Hardcover (Adobe Fonts variable, hardcover-vf) for display,
     General Sans (Fontshare) for body and mono-style labels. Display swapped
     from Newsreader → Hardcover 2026-06-06: warmer, more characterful book
     serif that still reads calm and legible from hero down to card titles.
     Hardcover loads via the Typekit project <link> (use.typekit.net/dri3xfa)
     in each page's <head>. */
  --display-font: 'hardcover-vf', Georgia, serif;
  --display-weight: 200;
  --display-italic-weight: 400;
  --display-tracking: -0.03em;
  --body-font: 'General Sans', 'Inter', -apple-system, sans-serif;
  --mono-font: 'General Sans', 'Inter', -apple-system, sans-serif;
  --label-tracking: 0.18em;

  /* Radii */
  --radius-card: 4px;
  --radius-pill: 999px;

  /* Gradients + glow — editorial mode flattens gradients to solid */
  --grad: linear-gradient(135deg, #2d5a3d 0%, #2d5a3d 100%);
  --glow: rgba(0, 0, 0, 0);
  --glow-soft: rgba(0, 0, 0, 0);
  --glow-faint: rgba(0, 0, 0, 0);

  /* Text selection */
  --selection-bg: #2d5a3d;
  --selection-fg: #f5f3ee;
}

/* ============================================================
   SYSTEMS THEME — dark navy + cool teal, more "control panel"
   ============================================================ */
:root[data-theme="systems"] {
  /* Surface */
  --bg: #0a0d11;
  --bg-elev: #0f1318;
  --bg-card: #131820;

  /* Type */
  --ink: #eef2f6;
  --ink-soft: #9aa4b1;
  --ink-muted: #5a6473;

  /* Hairlines — translucent so they layer over the gradient backdrop */
  --rule: rgba(238, 242, 246, 0.06);
  --rule-strong: rgba(238, 242, 246, 0.11);

  /* Brand accents — teal + soft blue used in the gradient */
  --accent: #6ee7d6;
  --accent-2: #7aa9ff;

  /* Fonts — Geist throughout in systems mode */
  --display-font: 'Geist', -apple-system, sans-serif;
  --display-weight: 300;
  --display-italic-weight: 300;
  --display-tracking: -0.04em;
  --body-font: 'Geist', -apple-system, sans-serif;
  --mono-font: 'Geist Mono', ui-monospace, monospace;
  --label-tracking: 0.04em;

  /* Radii — softer in systems mode */
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Gradient — the diagonal teal→blue used in accents, borders, text fill */
  --grad: linear-gradient(135deg, #6ee7d6 0%, #7aa9ff 100%);

  /* Glow — varying intensities for chrome rings, button shadows, ambient */
  --glow: rgba(120, 200, 230, 0.55);
  --glow-soft: rgba(120, 200, 230, 0.22);
  --glow-faint: rgba(120, 200, 230, 0.10);

  /* Text selection */
  --selection-bg: #6ee7d6;
  --selection-fg: #0a0d11;
}
