/* ============================================
   CZ Supply — Design Tokens
   ============================================ */

:root {
  /* --- Primary: Deep Navy --- */
  --navy: #1B2A4A;
  --navy-light: #2C3E6B;
  --navy-dark: #0F1A30;
  --navy-rgb: 27, 42, 74;

  /* --- Accent: Lavender (brand signature) --- */
  --lavender: #CEA7D4;
  --lavender-light: #E4D0E8;
  --lavender-dark: #9E6FA8;
  --lavender-subtle: #F5EFF7;
  --lavender-rgb: 206, 167, 212;

  /* --- Secondary: Warm Bronze --- */
  --bronze: #C4883C;
  --bronze-light: #D4A566;
  --bronze-dark: #8E5F25;

  /* --- Neutrals (warm-tinted) --- */
  --cream: #FAF7F2;
  --warm-white: #FEFDFB;
  --warm-100: #F0EDE8;
  --warm-200: #E0DBD3;
  --warm-300: #C8C1B7;
  --warm-400: #9B9488;
  --warm-500: #6E685D;
  --warm-600: #4A453D;
  --warm-700: #2E2A24;

  /* --- Text --- */
  --text: #1E1E1E;
  --text-secondary: #4A453D;
  --text-muted: #9B9488;
  --text-inverse: #FAF7F2;

  /* --- Semantic --- */
  --success: #3D7A4A;
  --error: #B83B3B;
  --star: #D4A04A;

  /* --- Surfaces --- */
  --surface: #FEFDFB;
  --surface-alt: #FAF7F2;
  --surface-elevated: #FFFFFF;
  --surface-dark: #1B2A4A;
  --surface-darker: #0F1A30;

  /* --- Typography --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-hero: clamp(2.75rem, 7vw, 5.5rem);
  --fs-display: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h1: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 2.5vw, 2rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  --ls-wide: 0.08em;
  --ls-wider: 0.14em;

  /* --- Spacing --- */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;
  --sp-5xl: 8rem;

  --section-pad: clamp(4rem, 8vw, 7rem);
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 780px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(var(--navy-rgb), 0.06);
  --shadow-md: 0 4px 12px rgba(var(--navy-rgb), 0.08);
  --shadow-lg: 0 8px 28px rgba(var(--navy-rgb), 0.12);
  --shadow-xl: 0 16px 48px rgba(var(--navy-rgb), 0.16);

  /* --- Borders & Radii --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --border: 1px solid var(--warm-200);
  --border-strong: 2px solid var(--navy);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 600ms;
}