/* ============================================================
   blog-pro — design tokens
   Derived from the Predictions 2026 UI kit, renamed to match
   Radix/shadcn conventions (semantic name first, step suffix).
   ============================================================ */

:root {
  /* ---------- Canvas & ink ---------- */
  --color-canvas:           oklch(0.97 0 0);         /* page bg */
  --color-surface:          oklch(1    0 0);         /* raised surface */
  --color-surface-sunken:   oklch(0.94 0 0);         /* codeblock, pre */
  --color-ink:              oklch(0.15 0 0);         /* body text */
  --color-ink-muted:        oklch(0.42 0 0);         /* secondary */
  --color-ink-subtle:       oklch(0.56 0 0);         /* meta */
  --color-rule:             oklch(0.82 0 0);         /* hairlines */
  --color-rule-strong:      oklch(0.70 0 0);

  /* ---------- Typography ---------- */
  --font-display: 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* modular scale — major second, rooted at 16px */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   clamp(3rem, 6vw, 5.5rem);
  --text-5xl:   clamp(4rem, 9vw, 7.5rem);

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-flat:   0;
  --tracking-wide:  0.04em;

  /* ---------- Spacing scale ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Elevation (card 4-stage + list/chrome) ---------- */
  --elevation-1:
    0 4px 12px rgba(0,0,0,.30),
    0 2px 4px  rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.50);

  --elevation-2:
    0 6px 18px rgba(0,0,0,.35),
    0 3px 8px  rgba(0,0,0,.15),
    inset 0 0 0 1px rgba(255,255,255,.60);

  --elevation-3:
    0 8px 24px rgba(0,0,0,.40),
    0 4px 12px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.70);

  --elevation-4:
    0 8px 32px rgba(0,0,0,.40),
    0 4px 16px rgba(0,0,0,.20);

  --elevation-list:       0 2px 8px  rgba(0,0,0,.15);
  --elevation-list-hover: 0 4px 16px rgba(0,0,0,.25);
  --elevation-chrome:     0 2px 5px  rgba(0,0,0,.25);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-iris:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      0.2s;
  --dur-base:      0.4s;
  --dur-card:      0.6s;
  --dur-flip:      0.8s;
  --dur-iris:      0.8s;

  /* ---------- Card geometry ---------- */
  --card-w: 260px;
  --card-h: 364px;
  --card-aspect: calc(364 / 260);

  /* ---------- Layout ---------- */
  --gutter: 10%;   /* guide-left / guide-right */
  --content-max: 80%;
}