/* ── Pyflo Design Tokens v2 — Editorial layer (Sprint 19.22-a) ─────
   Layered ON TOP of tokens.css. Existing themes (midnight/light/paper/
   ocean/forest/sunset) keep their bg-*/text-*/accent palettes; v2 adds
   semantic tokens (--ink-*/--paper-*), a real type scale, a 4-px
   spacing grid, radius/shadow/motion tiers, and a display-serif stack.

   Components in editorial.css address ONLY v2 tokens. Themes propagate
   automatically via the [data-theme] mappings below.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* ── Type scale ──────────────────────────────────────────────── */
  /* Display sizes use clamp() so they scale fluidly between mobile
     and desktop without separate media queries. */
  --t-display-1: clamp(2.5rem, 4.5vw + 1rem, 4rem);     /* 40 → 64 */
  --t-display-2: clamp(2.125rem, 3.5vw + 1rem, 3.5rem); /* 34 → 56 */
  --t-display-3: clamp(1.75rem, 2.5vw + 1rem, 3rem);    /* 28 → 48 */
  --t-h1: clamp(1.625rem, 1.5vw + 1rem, 2.5rem);        /* 26 → 40 */
  --t-h2: clamp(1.375rem, 1vw + 0.875rem, 1.75rem);     /* 22 → 28 */
  --t-h3: clamp(1.125rem, 0.5vw + 0.875rem, 1.375rem);  /* 18 → 22 */
  --t-body: 1.0625rem;     /* 17 */
  --t-body-lg: 1.125rem;   /* 18 — lede paragraph */
  --t-small: 0.9375rem;    /* 15 */
  --t-caption: 0.8125rem;  /* 13 */

  --lh-display: 1.05;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ── Font families ───────────────────────────────────────────── */
  /* Display serif: prefers Iowan Old Style (macOS/iOS), Charter (most
     ChromeOS / many distros), Georgia (universal fallback). All are
     workhorse editorial serifs — no external font load required.
     Future: add InstrumentSerif-*.woff2 to /web/static/fonts/ to
     unify the brand. */
  --font-display: 'Iowan Old Style', 'Charter', 'Bitstream Charter',
                  'Source Serif Pro', Georgia, 'Times New Roman', serif;
  /* Fall back to the existing UI sans (already loaded by tokens.css). */
  --font-ui: var(--font, 'Instrument Sans', -apple-system, system-ui, sans-serif);
  --font-mono: var(--mono, 'JetBrains Mono', ui-monospace, monospace);

  /* ── Spacing — 4px grid ──────────────────────────────────────── */
  --s-1: 0.25rem;   /*  4 */
  --s-2: 0.5rem;    /*  8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.25rem;   /* 20 */
  --s-6: 1.5rem;    /* 24 */
  --s-7: 2rem;      /* 32 */
  --s-8: 2.5rem;    /* 40 */
  --s-9: 3rem;      /* 48 */
  --s-10: 4rem;     /* 64 */
  --s-11: 5rem;     /* 80 */
  --s-12: 6rem;     /* 96 */

  /* Article rhythm */
  --rhythm-block: var(--s-6);   /* between paragraphs/sections */
  --rhythm-inner: var(--s-3);   /* inside compound blocks */

  /* ── Radius (2 tiers) ────────────────────────────────────────── */
  --rad-sm: 4px;
  --rad-md: 12px;

  /* ── Motion (3 durations × 2 easings) ────────────────────────── */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);

  /* ── Article width (single-column, optical-rest 70-72ch) ────── */
  --col-article: 38rem;     /* ~608px @ 16px → ~70 chars at body size */
  --col-article-wide: 44rem;
  --col-page-pad: max(var(--s-5), env(safe-area-inset-left, 0));
}

/* ── Semantic tokens — map per-theme palettes to ink/paper roles ─
   These are the ONLY color tokens v2 components reference, so a new
   theme just needs to set its bg-*/text-*/accent in tokens.css and
   ink/paper come along for free. */

:root, [data-theme="paper"] {
  --paper-1: var(--bg-1);  /* page background */
  --paper-2: var(--bg-0);  /* canvas behind cards */
  --paper-3: var(--bg-2);  /* card surface */
  --paper-4: var(--bg-3);  /* raised surface */
  --ink-1: var(--text-0);  /* primary text */
  --ink-2: var(--text-1);  /* secondary text */
  --ink-3: var(--text-2);  /* tertiary / muted */
  --ink-4: var(--border);  /* dividers, hairlines */
  --rule: var(--border);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
}

[data-theme="light"] {
  --paper-1: var(--bg-1); --paper-2: var(--bg-0);
  --paper-3: var(--bg-1); --paper-4: var(--bg-3);
  --ink-1: var(--text-0); --ink-2: var(--text-1); --ink-3: var(--text-2);
  --ink-4: var(--border);
  --rule: var(--border);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
}

[data-theme="midnight"], [data-theme="ocean"], [data-theme="forest"], [data-theme="sunset"] {
  --paper-1: var(--bg-0);
  --paper-2: var(--bg-1);
  --paper-3: var(--bg-2);
  --paper-4: var(--bg-3);
  --ink-1: var(--text-0); --ink-2: var(--text-1); --ink-3: var(--text-2);
  --ink-4: var(--border);
  --rule: var(--border);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
}

/* ── Reduced-motion preference — collapse all motion durations ──── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}