/* ============================================
   SEAFOAM BEADS - Design Tokens
   Handcrafted Coastal Jewelry
   ============================================ */

:root {
  /* ---- Brand Colors (from logo) ---- */
  --seafoam-primary: #3CB4A0;
  --seafoam-primary-hover: #2E9A88;
  --seafoam-primary-active: #268A79;
  --aqua-light: #7DD4C8;
  --mint-bg: #98E4D0;
  --pearl-white: #F5F0E8;

  /* ---- Ocean Pastel Palette ---- */
  --pastel-blue-light: #B8E4F0;
  --pastel-blue-mid: #89CFF0;
  --pastel-blue-deep: #6CB4D8;
  --pastel-lavender: #D4C8E8;
  --pastel-pink: #F0D4DC;

  /* ---- Neutrals ---- */
  --white: #FFFFFF;
  --off-white: #FAFCFD;
  --sand-light: #F7F5F2;
  --sand: #EDE8E1;
  --text-dark: #2D3E50;
  --text-medium: #5A7080;
  --text-light: #8A9BAA;
  --border-light: rgba(45, 62, 80, 0.08);
  --border-medium: rgba(45, 62, 80, 0.15);

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-strong: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-strong: rgba(255, 255, 255, 0.28);
  --glass-blur: 12px;
  --glass-blur-heavy: 16px;

  /* ---- Gradients ---- */
  --gradient-ocean: linear-gradient(135deg, var(--pastel-blue-light) 0%, var(--mint-bg) 50%, var(--pastel-blue-mid) 100%);
  --gradient-aurora: linear-gradient(160deg, #B8E4F0 0%, #98E4D0 25%, #89CFF0 50%, #D4C8E8 75%, #B8E4F0 100%);
  --gradient-hero: linear-gradient(180deg, var(--pastel-blue-light) 0%, var(--aqua-light) 40%, var(--mint-bg) 100%);
  --gradient-subtle: linear-gradient(180deg, var(--off-white) 0%, var(--sand-light) 100%);

  /* ---- Typography ---- */
  --font-display: 'Pacifico', cursive;
  --font-body: 'Poppins', sans-serif;

  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing (8px grid) ---- */
  --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 */

  /* ---- Layout ---- */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --header-height: 72px;

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

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(45, 62, 80, 0.06), 0 1px 2px rgba(45, 62, 80, 0.04);
  --shadow-md: 0 4px 12px rgba(45, 62, 80, 0.08), 0 2px 4px rgba(45, 62, 80, 0.04);
  --shadow-lg: 0 8px 24px rgba(45, 62, 80, 0.1), 0 4px 8px rgba(45, 62, 80, 0.04);
  --shadow-xl: 0 16px 48px rgba(45, 62, 80, 0.12), 0 8px 16px rgba(45, 62, 80, 0.06);
  --shadow-glow: 0 0 20px rgba(60, 180, 160, 0.25);

  /* ---- Transitions (from VISUAL-2026-003) ---- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}