/* Design tokens + base reset shared by every page on the site.
   Three palettes: green, rainbow, blue. :root holds green; the two others
   override it below. Which ones a page offers is set in content.js.

   SIZING RULES — keep these true when editing:
   - Every length is a plain CSS pixel. Nothing scales the page with `zoom`;
     that broke the link between breakpoints, vw units and the real viewport.
   - Type scale:    14 16 18 20 24 28 32 40 48 64 72 96
   - Spacing scale: multiples of 8 (4 only for hairline nudges)
   - Design viewport 1440. Content caps at --w (1200) with an 88px gutter, so
     the inner width is 1024 — matching what the E/B prototypes rendered.
   - Breakpoints: 1024 (collapse) / 640 (phone). The gutter holds at 88px
     down to 1024 rather than stepping at 1280. */

:root{
  --paper:#F3F1ED;
  --ink:#111;
  --ink-2:#2A2A2A;
  --gray:#666;
  --gray-2:#555;
  --rule:#DAD6CE;
  --card:#DDD9D1;
  --field:#FBFAF8;
  --field-border:#C8C4BC;
  --accent:#4D7C5F;
  --grad:linear-gradient(90deg,#8FBC94 0%,#4D7C5F 50%,#2F4F3A 100%);
  --grad-bright:linear-gradient(90deg,#8FBC94 0%,#4D7C5F 100%);
  --serif:"Newsreader","Times New Roman",Georgia,serif;
  --sans:"Inter",-apple-system,system-ui,Helvetica,Arial,sans-serif;
  --w:1200px;
  --gutter:88px;
  /* Title and dek for a listed item — a "ways to work" card or an article row.
     They sit across from each other on Advisory and must match. A section may
     raise --item-title on itself where its column is wider. */
  --item-title:28px;

  /* Tracking for serif display type. Newsreader sets a little loose at heading
     sizes, so headings, titles and the wordmark all pull in by the same amount
     rather than each rule picking its own number. The name runs tighter still,
     because tracking has to grow more negative as type grows. */
  --track-display:-.016em;
  --track-name:-.026em;
  --item-dek:18px;
}

html[data-theme="rainbow"]{
  --accent:#D94F84;
  --grad:linear-gradient(90deg,#E2673B 0%,#D94F84 50%,#8F5CF0 100%);
  --grad-bright:linear-gradient(90deg,#E2673B 0%,#8F5CF0 100%);
}

html[data-theme="blue"]{
  --accent:#2563EB;
  --grad:linear-gradient(90deg,#3B82F6 0%,#1E40AF 50%,#5B21B6 100%);
  --grad-bright:linear-gradient(90deg,#3B82F6 0%,#1E40AF 100%);
}

/* Green candidates, second pass. The default green reads flat because all three
   stops sit on one hue (~135deg) and only darken; rainbow pops because it
   travels ~115deg of hue. Each option below sweeps a comparable distance while
   staying green, and takes --grad-bright from the two end stops so the two-stop
   version keeps the full span.

   Two constraints came out of review and bind every option here: no stop sits
   in yellow-green (hue under ~120deg reads acidic at these chromas), and no
   stop is both very light and very saturated, which is what made the first
   pass look neon rather than professional. --accent is deliberately darker
   than its gradient's mid stop: it colors small elements — rules, underlines,
   labels — where a mid-tone green went muddy against the paper. */

/* The default green's own tone, held but pulled apart: a lighter start, a much
   darker end, and a deeper accent, for contrast on the small elements. */
html[data-theme="sage"]{
  --accent:#2F6B47;
  --grad:linear-gradient(90deg,#93C79A 0%,#3F7A57 50%,#1B3A2A 100%);
  --grad-bright:linear-gradient(90deg,#93C79A 0%,#1B3A2A 100%);
}

html[data-theme="jade"]{
  --accent:#1B7F6E;
  --grad:linear-gradient(90deg,#4CAF6E 0%,#1E8E7E 50%,#17607F 100%);
  --grad-bright:linear-gradient(90deg,#4CAF6E 0%,#17607F 100%);
}

html[data-theme="spring"]{
  --accent:#0E8A90;
  --grad:linear-gradient(90deg,#3FC97C 0%,#0E9AA0 50%,#1F5FA6 100%);
  --grad-bright:linear-gradient(90deg,#3FC97C 0%,#1F5FA6 100%);
}

html[data-theme="emerald"]{
  --accent:#0E9488;
  --grad:linear-gradient(90deg,#2FB673 0%,#0E9488 50%,#155E75 100%);
  --grad-bright:linear-gradient(90deg,#2FB673 0%,#155E75 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Reserve the scrollbar gutter always, so locking body scroll for a modal
   does not widen the page and shift everything (and the fixed header) right. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
html,body{background:var(--paper);min-height:100%}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500}