/* ============================================
   SSN ELITE — Design Tokens
   All design decisions centralized as CSS custom properties
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --ssn-blue: #0A2FFF;
  --ssn-blue-deep: #061B99;
  --ssn-blue-light: #3D5AFF;
  --ssn-blue-glow: rgba(10, 47, 255, 0.12);
  --ssn-blue-glow-strong: rgba(10, 47, 255, 0.25);
  --ssn-blue-surface: rgba(10, 47, 255, 0.04);

  /* ── Surfaces ── */
  --surface-white: #FFFFFF;
  --surface-off-white: #F7F7F8;
  --surface-light: #F0F0F2;
  --surface-subtle: #E8E8EC;
  --surface-dark: #0A0A0A;
  --surface-dark-elevated: #141414;

  /* ── Text ── */
  --text-primary: #0A0A0A;
  --text-secondary: #4A4A52;
  --text-tertiary: #8A8A96;
  --text-quaternary: #B0B0BA;
  --text-on-dark: #F7F7F8;
  --text-on-blue: #FFFFFF;

  /* ── Borders ── */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-light: rgba(0, 0, 0, 0.10);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-blue: rgba(10, 47, 255, 0.20);

  /* ── Glass ── */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.40);
  --glass-blur: 20px;
  --glass-blur-nav: 24px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.10);
  --shadow-blue: 0 8px 32px rgba(10, 47, 255, 0.12);
  --shadow-product: 0 20px 60px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);

  /* ── Typography ── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-display: clamp(3.5rem, 8vw, 6rem);
  --text-h1: clamp(2.5rem, 5vw, 4.5rem);
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-h3: clamp(1.5rem, 3vw, 2rem);
  --text-h4: clamp(1.25rem, 2vw, 1.5rem);
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;
  --text-label: 0.6875rem;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.18em;

  /* ── Spacing Scale ── */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* ── Layout ── */
  --container-max: 1360px;
  --container-narrow: 1040px;
  --container-text: 820px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  --nav-height: 72px;

  /* ── Breakpoints (for reference, used in media queries) ── */
  /* --bp-sm: 640px   */
  /* --bp-md: 768px   */
  /* --bp-lg: 1024px  */
  /* --bp-xl: 1280px  */
  /* --bp-2xl: 1440px */

  /* ── Transitions ── */
  --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.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Product Accent Colors ── */
  --accent-whey: var(--ssn-blue);
  --accent-mass: #7C3AED;
  --accent-creatine: #059669;
  --accent-eaa: #D97706;
}