/* ==========================================================================
   tokens.css — Design Tokens & Custom Properties
   Source: alex-wbs.framer.website (Framer ca8ceca) — WHITE THEME
   ========================================================================== */

:root {
  /* ── Colors (light/white theme) ── */
  --red: #df062a;
  --red-hover: #ff1744;
  --black: #0d0d0d;
  --white: #ffffff;
  --light: #f3f3f3;
  --mid: #4e4e4e;
  --grey: #b5b5b5;
  --grey-light: #d4d4d4;
  --text: #0d0d0d;
  --text-70: rgba(13, 13, 13, 0.7);
  --text-50: rgba(13, 13, 13, 0.5);
  --text-40: rgba(13, 13, 13, 0.4);
  --text-15: rgba(13, 13, 13, 0.15);
  --text-12: rgba(13, 13, 13, 0.12);
  --text-10: rgba(13, 13, 13, 0.1);
  --text-08: rgba(13, 13, 13, 0.08);
  --border-light: rgba(13, 13, 13, 0.07);
  --border-mid: rgba(13, 13, 13, 0.1);
  --border-strong: rgba(13, 13, 13, 0.15);

  /* legacy aliases (kept for components that still reference them) */
  --card: #f3f3f3;
  --white-20: rgba(255, 255, 255, 0.2);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-04: rgba(255, 255, 255, 0.04);
  --white-03: rgba(255, 255, 255, 0.03);
  --cell: #f3f3f3;
  --star-gold: #fbbf24;

  /* ── Typography ── */
  --sans: 'Switzer', 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Inter', 'Switzer', system-ui, sans-serif;
  --mono: 'Geist', 'Space Mono', monospace;
  --font-feature: 'ss01', 'cv11';

  /* ── Easing ── */
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1.1);

  /* ── Transitions ── */
  --t-fast: 0.2s var(--ease);
  --t-base: 0.4s var(--ease);
  --t-slow: 0.6s var(--ease);
  --t-spring: 1s var(--ease-spring);
  --t-bounce: 0.8s var(--ease-bounce);

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 60px;
  --space-11: 80px;
  --space-12: 100px;
  --space-13: 120px;

  /* ── Radii ── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 24px;
  --r-pill: 100px;

  /* ── Layout ── */
  --max-w: 1400px;
  --nav-w: 720px;
  --gutter: 40px;

  /* ── Z-index ── */
  --z-base: 1;
  --z-elevated: 10;
  --z-nav: 100;
  --z-lightbox: 1000;
  --z-cursor: 10000;
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
}