/* Design tokens.
 *
 * The ground is paper, not the generic dark-SaaS violet gradient this site used
 * to have. Every shop in this market already runs on a ruled exercise book —
 * that artifact is where the identity comes from, and it lets violet finally
 * act as an accent instead of competing with a violet background.
 *
 * Full light palette lives on bare :root so the "system" theme (which stamps
 * no attribute) always resolves. Dark is redefined twice: once under
 * prefers-color-scheme guarded against an explicit light choice, and once under
 * [data-theme="dark"] so the toggle wins in both directions.
 */

:root {
  /* Ground and ink */
  --paper: #fbf8f3;
  --paper-raised: #ffffff;
  --ink: #16233a;
  --ink-soft: #4a5a75;
  --rule: #d5deec;

  /* Brand — unchanged, so the site still rhymes with the ad campaign */
  --violet: #7c3aed;
  --violet-ink: #ffffff;
  --violet-wash: rgba(124, 58, 237, 0.08);

  /* Signals */
  --stamp: #0e7c66;
  --flag: #c2410c;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale — 1.25 minor third, fluid between 360px and 1200px */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.25rem + 0.9vw, 2.05rem);
  --step-3: clamp(1.73rem, 1.4rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.07rem, 1.5rem + 2.7vw, 3.9rem);

  /* Space — 8pt grid */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  /* Measure and gutters */
  --measure: 68ch;
  --content: 1140px;
  --gutter: clamp(1rem, 5vw, 3rem);

  --radius: 6px;
  --hairline: 1px;
}

:root:not([data-theme='light']) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0e1626;
    --paper-raised: #162034;
    --ink: #eaf0f8;
    --ink-soft: #9fb0c9;
    --rule: rgba(234, 240, 248, 0.14);
    --violet: #a78bfa;
    --violet-ink: #10131f;
    --violet-wash: rgba(167, 139, 250, 0.12);
    --stamp: #34d3ab;
    --flag: #fb923c;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper: #0e1626;
  --paper-raised: #162034;
  --ink: #eaf0f8;
  --ink-soft: #9fb0c9;
  --rule: rgba(234, 240, 248, 0.14);
  --violet: #a78bfa;
  --violet-ink: #10131f;
  --violet-wash: rgba(167, 139, 250, 0.12);
  --stamp: #34d3ab;
  --flag: #fb923c;
  color-scheme: dark;
}