/* ============================================================
   VARIABLES.CSS — Global Design Tokens
   
   Aligned with the approved design system in my design.html
   ============================================================ */

:root {
  /* ─── COLORS ─── */
  
  /* Brand Core */
  --brand-navy: #111D35;
  --brand-amber: #F19E1F;
  --brand-offwhite: #F8F9FB;
  
  /* Semantic / System */
  --on-surface: #191c1e;
  --on-surface-variant: #45464d;
  --border-subtle: #E2E8F0;
  
  /* Specific Surface Colors */
  --surface-container-high: #e7e8ea;
  --surface-slate: #F1F5F9;
  
  /* Accent Colors */
  --whatsapp-green: #25D366;
  --white: #ffffff;
  --black: #000000;

  /* ─── TYPOGRAPHY ─── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ─── BORDER RADIUS ─── */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;
  --radius-full: 9999px;

  /* ─── SPACING (Based on 8px grid & design doc) ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: clamp(16px, 2.5vw, 24px);   /* gutter */
  --space-xl: clamp(24px, 3.5vw, 32px);
  --space-2xl: clamp(40px, 6vw, 64px);  /* section-mobile */
  --space-3xl: clamp(64px, 10vw, 128px); /* section-desktop */
  
  --container-max: 1280px;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Custom Shadows from design */
  --shadow-card: 0px 4px 24px rgba(17, 29, 53, 0.02);
  --shadow-card-hover: 0px 8px 32px rgba(17, 29, 53, 0.06);
  --shadow-nav: 0px 4px 24px rgba(17, 29, 53, 0.06);
  --shadow-glow-amber: 0 0 50px rgba(241, 158, 31, 0.4);
  --shadow-glow-green: 0 0 50px rgba(37, 211, 102, 0.4);

  /* ─── TRANSITIONS ─── */
  --transition-fast: 200ms ease;
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}