/* ==========================================================================
   tokens.css — Design tokens (colors, spacing, type, motion)
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #FBFBFD;
  --color-bg-alt: #FFFFFF;
  --color-text: #1D1D1F;
  --color-text-mute: #86868B;
  --color-accent: #0066CC;
  --color-accent-hover: #0052A3;
  --color-border: rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.08);

  /* Easing */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;

  /* Header height (used for scroll-margin-top) */
  --header-h: 64px;
}

@media (max-width: 640px) {
  :root {
    --container-pad: 16px;
  }
}