/* Review Intel tokens as CSS custom properties, copied from the Review Intel design system's tokens.json (light only).
   The system publishes no tokens.css, so this file carries the variables bundle.css reads, plus the base type classes. */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --page: #fafafa; --surface: #ffffff; --surface-subtle: #fcfcfc;
  --fill: #f5f5f5; --fill-strip: #f6f6f6; --fill-tag: #f2f2f2; --tile: #e8e8e8;
  --rule: #ebebeb; --divider: #ededed; --divider-crop: #efefef;
  --border-review: #eaeaea; --border-card: #e5e5e5; --border-feature: #e3e3e3;
  --border-pill: #e0e0e0; --border-check: #dadada; --border-input: #d9d9d9;
  --ink: #171717; --ink-review: #262626; --ink-body: #404040; --ink-secondary: #525252;
  --ink-tertiary: #737373; --ink-heading-gray: #8a8a8a; --icon: #8f8f8f; --star-empty: #e2e2e2; --on-ink: #ffffff;
  --bar-fill: #262626; --bar-track: #f2f2f2; --bar-1star: #d0402b; --ink-1star: #b42318;
  --marker: #ffe27a; --marker-mint: #cdebd9; --marker-peach: #ffd5c7;
  --mark-ink: #171715; --mark-paper: #f4efe5; --mark-green: #0f4f46;

  --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px;
  --space-16: 16px; --space-18: 18px; --space-22: 22px; --space-24: 24px; --space-28: 28px; --space-30: 30px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px;

  --radius-xs: 9px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 16px; --radius-2xl: 22px; --radius-pill: 999px;

  --shadow-crop: 0 10px 28px -16px rgba(0, 0, 0, 0.2);
  --shadow-read: 0 28px 70px -36px rgba(0, 0, 0, 0.25);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #171717;

  --control-xl: 56px; --control-lg: 52px; --control-md: 48px; --control-sm: 40px; --control-xs: 32px;
  --app-tile: 36px; --disc-size: 30px; --logo-size: 26px; --bar-height: 8px;

  --frame-max: 1200px;
  --gutter: clamp(20px, 4vw, 48px); --gutter-header: clamp(16px, 3vw, 28px);
  --hero-pad-top: clamp(28px, 5vw, 60px); --hero-pad-bottom: clamp(36px, 4vw, 52px); --hero-text-offset: clamp(0px, 2vw, 22px);
  --section-pad-top: clamp(48px, 6vw, 80px); --section-pad-bottom: clamp(48px, 6vw, 72px);
  --cell-pad: clamp(20px, 3vw, 32px); --read-pad: clamp(22px, 3vw, 32px);
  --hero-text-basis: 500px; --hero-wall-basis: 440px; --wall-height: 620px; --wall-col: 220px;
  --step-min: 340px; --quote-min: 300px; --lede-max: 500px; --heading-max: 860px;
  --fs-display: clamp(38px, 4.3vw, 60px); --fs-display-long: clamp(36px, 3.8vw, 52px);
  --fs-heading: clamp(28px, 3vw, 40px); --fs-read-lede: clamp(18px, 1.6vw, 21px);
}

/* Base type styles from tokens.json (bundle.css adds the fluid sizes) */
.ri-display { font-weight: 600; line-height: 1.03; letter-spacing: -0.04em; }
.ri-heading { font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.ri-title { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.ri-stat { font-size: 38px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.ri-lede { font-size: 18px; line-height: 1.55; font-weight: 400; }
.ri-eyebrow { font-size: 15px; font-weight: 500; }
.ri-body { font-size: 15px; line-height: 1.55; color: var(--ink-body); }
.ri-note { font-size: 14px; line-height: 1.5; }
.ri-small { font-size: 13px; }
.ri-caption { font-size: 12.5px; line-height: 1.4; }
.ri-label { font-size: 12px; font-weight: 600; }
.ri-data { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
.ri-data-md { font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); }