/* ── Inter font fallback for non-Apple platforms ── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

:root {
  /* ── Color Tokens ── */
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;
  --color-ink: #1d1d1f;
  --color-body: #1d1d1f;
  --color-body-on-dark: #ffffff;
  --color-body-muted: #cccccc;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;
  --color-divider-soft: #f0f0f0;
  --color-hairline: #e0e0e0;
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;
  --color-surface-tile-1: #272729;
  --color-surface-tile-2: #2a2a2c;
  --color-surface-tile-3: #252527;
  --color-surface-black: #000000;
  --color-surface-chip-translucent: #d2d2d7;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

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

  --text-hero-display-size: 56px;
  --text-hero-display-weight: 600;
  --text-hero-display-lh: 1.07;
  --text-hero-display-ls: -0.28px;

  --text-display-lg-size: 40px;
  --text-display-lg-weight: 600;
  --text-display-lg-lh: 1.10;
  --text-display-lg-ls: 0px;

  --text-display-md-size: 34px;
  --text-display-md-weight: 600;
  --text-display-md-lh: 1.47;
  --text-display-md-ls: -0.374px;

  --text-lead-size: 28px;
  --text-lead-weight: 400;
  --text-lead-lh: 1.14;
  --text-lead-ls: 0.196px;

  --text-lead-airy-size: 24px;
  --text-lead-airy-weight: 300;
  --text-lead-airy-lh: 1.5;
  --text-lead-airy-ls: 0px;

  --text-tagline-size: 21px;
  --text-tagline-weight: 600;
  --text-tagline-lh: 1.19;
  --text-tagline-ls: 0.231px;

  --text-body-size: 17px;
  --text-body-weight: 400;
  --text-body-lh: 1.47;
  --text-body-ls: -0.374px;

  --text-body-strong-size: 17px;
  --text-body-strong-weight: 600;
  --text-body-strong-lh: 1.24;
  --text-body-strong-ls: -0.374px;

  --text-caption-size: 14px;
  --text-caption-weight: 400;
  --text-caption-lh: 1.43;
  --text-caption-ls: -0.224px;

  --text-caption-strong-size: 14px;
  --text-caption-strong-weight: 600;
  --text-caption-strong-lh: 1.29;
  --text-caption-strong-ls: -0.224px;

  --text-button-large-size: 18px;
  --text-button-large-weight: 300;
  --text-button-large-lh: 1.0;
  --text-button-large-ls: 0px;

  --text-button-utility-size: 14px;
  --text-button-utility-weight: 400;
  --text-button-utility-lh: 1.29;
  --text-button-utility-ls: -0.224px;

  --text-fine-print-size: 12px;
  --text-fine-print-weight: 400;
  --text-fine-print-lh: 1.0;
  --text-fine-print-ls: -0.12px;

  --text-nav-link-size: 12px;
  --text-nav-link-weight: 400;
  --text-nav-link-lh: 1.0;
  --text-nav-link-ls: -0.12px;

  /* ── Border Radius ── */
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

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

  /* ── Elevation ── */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
  --border-hairline: 1px solid rgba(0, 0, 0, 0.08);

  /* ── Layout ── */
  --content-max-width: 1440px;
  --content-narrow-width: 980px;
  --nav-height: 44px;
  --subnav-height: 52px;

  /* ── Animation ── */
  --ease-apple: cubic-bezier(0.44, 0.11, 0.18, 1);
  --ease-enter: cubic-bezier(0.25, 0.02, 0.16, 1);
  --ease-exit: cubic-bezier(0.35, 0, 0.65, 1);
  --duration-fast: 0.25s;
  --duration-normal: 0.5s;
  --duration-slow: 0.9s;
  --duration-enter: 1.0s;
}