/* ==========================================================================
   Apple design tokens — single source of truth
   ========================================================================== */
:root {
  /* ── Colors ────────────────────────────── */
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;

  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;

  --color-tile-1: #272729;
  --color-tile-2: #2a2a2c;
  --color-tile-3: #252527;
  --color-black: #000000;

  --color-ink: #1d1d1f;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;
  --color-body-on-dark: #ffffff;
  --color-body-muted: #cccccc;

  --color-divider-soft: rgba(0, 0, 0, 0.04);
  --color-hairline: #e0e0e0;
  --color-hairline-soft: #f0f0f0;
  --color-chip-translucent: rgba(210, 210, 215, 0.64);

  /* ── Typography ────────────────────────── */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  --type-hero-size: 56px;          --type-hero-line: 1.07; --type-hero-track: -0.28px;
  --type-display-lg-size: 40px;    --type-display-lg-line: 1.10; --type-display-lg-track: 0;
  --type-display-md-size: 34px;    --type-display-md-line: 1.18; --type-display-md-track: -0.374px;
  --type-lead-size: 28px;          --type-lead-line: 1.14; --type-lead-track: 0.196px;
  --type-tagline-size: 21px;       --type-tagline-line: 1.19; --type-tagline-track: 0.231px;
  --type-body-size: 17px;          --type-body-line: 1.47; --type-body-track: -0.374px;
  --type-caption-size: 14px;       --type-caption-line: 1.43; --type-caption-track: -0.224px;
  --type-fine-size: 12px;          --type-fine-line: 1.20; --type-fine-track: -0.12px;

  /* ── Spacing ───────────────────────────── */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  17px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* ── Radii ─────────────────────────────── */
  --r-none: 0;
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-pill: 9999px;

  /* ── Shadow (only one — for product imagery) */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  /* ── Layout widths ─────────────────────── */
  --container-narrow: 980px;
  --container-wide:   1440px;

  /* ── Motion ────────────────────────────── */
  --transition-press: transform 80ms ease-out;
  --transition-fade:  opacity 200ms ease-out;
}