/* =============================================
   ShipMint Design System — Variables
   ============================================= */

:root {
  /* Primary Brand Colors */
  --navy: #061A33;
  --navy-surface: #0E2A4A;
  --navy-card: #0E2A4A;
  --navy-border: rgba(255, 255, 255, 0.08);
  --blue: #1E90FF;
  --blue-hover: #3DA0FF;
  --blue-glow: rgba(30, 144, 255, 0.25);
  --blue-subtle: rgba(30, 144, 255, 0.08);

  /* Secondary Brand Colors */
  --green: #32CD32;
  --green-glow: rgba(50, 205, 50, 0.2);
  --teal: #32CD32; /* alias for backward compat */
  --teal-glow: rgba(50, 205, 50, 0.2);
  --coral: #FC353F;
  --amber: #FFA500;
  --indigo: #7D42FB;

  /* Text Colors (Dark Mode) */
  --text-primary: #ECEEF1;
  --text-secondary: #828C99;
  --text-muted: #637080;
  --white: #FFFFFF;

  /* Light Mode (for light-bg sections) */
  --light-bg: #ECEEF1;
  --light-surface: #FFFFFF;
  --light-border: #D8DEE3;
  --light-text: #061A33;
  --light-text-secondary: #637080;
  --light-text-muted: #828C99;

  /* Shadows */
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.18);
  --card-shadow-dark: 0 4px 24px rgba(0, 0, 0, 0.3);
  --card-shadow-dark-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
  --blue-shadow: 0 4px 20px var(--blue-glow);
  --blue-shadow-hover: 0 8px 30px rgba(30, 144, 255, 0.35);

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 100px;

  /* Transitions */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing */
  --section-padding: clamp(80px, 8vw, 160px);
  --section-padding-sm: clamp(60px, 5vw, 100px);
  --container-max: clamp(320px, 82vw, 1800px);
  --container-wide: clamp(320px, 88vw, 2000px);
  --container-narrow: clamp(320px, 55vw, 1000px);

  /* Typography */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: clamp(11px, 0.7vw, 14px);
  --font-size-sm: clamp(12px, 0.75vw, 15px);
  --font-size-base: clamp(14px, 0.85vw, 18px);
  --font-size-md: clamp(15px, 0.9vw, 19px);
  --font-size-lg: clamp(16px, 1vw, 22px);
  --font-size-xl: clamp(18px, 1.15vw, 26px);
  --font-size-2xl: clamp(22px, 1.4vw, 32px);
  --font-size-3xl: clamp(28px, 1.8vw, 42px);
  --font-size-4xl: clamp(36px, 2.3vw, 52px);
  --font-size-5xl: clamp(42px, 2.8vw, 64px);
  --font-size-hero: clamp(40px, 3.5vw, 72px);
}