/* scalingwebapps.com — design tokens
   Light + dark palettes, type scale, spacing, radii, shadows.
   Load first, before site.css. No external fonts. */

:root {
  color-scheme: light dark;

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --step--1: 14px;  /* captions, meta — smallest text on the site */
  --step-0:  17px;  /* body */
  --step-1:  19px;  /* lead body, feature copy */
  --step-2:  22px;  /* h3 */
  --step-3:  27px;  /* h2 mobile */
  --step-4:  34px;  /* h2 desktop / h1 mobile */
  --step-5:  clamp(34px, 8vw, 56px); /* h1 */

  --lh-body: 1.6;
  --lh-snug: 1.35;
  --lh-tight: 1.1;
  --tracking-tight: -0.021em;
  --measure: 36rem;

  /* ---- Colour: light ---- */
  --bg:          #ffffff;
  --bg-sunken:   #f4f5f7;
  --surface:     #ffffff;
  --surface-2:   #f7f8fa;
  --ink:         #15171a;
  --ink-2:       #4c525b;
  --ink-3:       #767d88;
  --line:        #e4e6ea;
  --line-strong: #cdd2d9;
  --accent:      #2f55cc;
  --accent-ink:  #ffffff;
  --focus:       #2f55cc;
  --danger:      #b3261e;

  --accent-soft: color-mix(in oklab, var(--accent) 10%, var(--bg));
  --accent-line: color-mix(in oklab, var(--accent) 32%, var(--bg));

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(16, 18, 22, .06), 0 1px 1px rgba(16, 18, 22, .04);
  --shadow-2: 0 8px 28px rgba(16, 18, 22, .09);

  /* ---- Radii ---- */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-pill: 999px;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---- Layout ---- */
  --page: 1120px;
  --gutter: 20px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0e1013;
    --bg-sunken:   #08090b;
    --surface:     #16181c;
    --surface-2:   #1b1e23;
    --ink:         #f0f2f5;
    --ink-2:       #b7bec8;
    --ink-3:       #8a919c;
    --line:        #262a31;
    --line-strong: #3a3f48;
    --accent:      #86a6ff;
    --accent-ink:  #0e1013;
    --focus:       #86a6ff;
    --danger:      #ff8f85;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .55);
  }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --step-3: 30px; --step-4: 40px; }
}