/* daily-feed design tokens — sourced from DESIGN.md (Linear).
   This file is the single source of truth for color/spacing/typography variables
   referenced by every per-item HTML page. Do NOT inline hex literals or raw px
   font-sizes in page CSS — use these tokens. See DESIGN.md → Editorial Patterns. */

:root {
  /* Colors — brand & accent */
  --primary: #5e6ad2;
  --on-primary: #ffffff;
  --primary-hover: #828fff;
  --primary-focus: #5e69d1;
  --brand-secure: #7a7fad;

  /* Colors — surface ladder */
  --canvas: #010102;
  --surface-1: #0f1011;
  --surface-2: #141516;
  --surface-3: #18191a;
  --surface-4: #191a1b;
  --hairline: #23252a;
  --hairline-strong: #34343a;
  --hairline-tertiary: #3e3e44;

  /* Colors — text */
  --ink: #f7f8f8;
  --ink-muted: #d0d6e0;
  --ink-subtle: #8a8f98;
  --ink-tertiary: #62666d;

  /* Colors — semantic (use sparingly; success only) */
  --semantic-success: #27a644;
  --semantic-overlay: #000000;

  /* Spacing scale */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-pill: 9999px;

  /* Typography — font families */
  --font-display: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Typography — type ramp (sizes) */
  --fs-display-xl: 80px;
  --fs-display-lg: 56px;
  --fs-display-md: 40px;
  --fs-headline: 28px;
  --fs-card-title: 22px;
  --fs-subhead: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-button: 14px;
  --fs-eyebrow: 13px;
  --fs-mono: 13px;

  /* Typography — leading */
  --lh-display-xl: 1.05;
  --lh-display-lg: 1.10;
  --lh-display-md: 1.15;
  --lh-headline: 1.20;
  --lh-card-title: 1.25;
  --lh-subhead: 1.40;
  --lh-body: 1.50;
  --lh-body-relaxed: 1.60;
  --lh-caption: 1.40;

  /* Typography — tracking */
  --tr-display-xl: -3.0px;
  --tr-display-lg: -1.8px;
  --tr-display-md: -1.0px;
  --tr-headline: -0.6px;
  --tr-card-title: -0.4px;
  --tr-subhead: -0.2px;
  --tr-body-lg: -0.1px;
  --tr-body: -0.05px;
  --tr-body-sm: 0;
  --tr-caption: 0;
  --tr-eyebrow: 0.4px;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-display: 'Inter var', 'SF Pro Display', -apple-system, system-ui, sans-serif;
    --font-text: 'Inter var', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  }
}

html {
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}