/* css/variables.css */
:root {
  --color-brand:          #1B6CA8;
  --color-brand-vivid:    #2E9FD9;
  --color-brand-tint:     #EFF6FF;   /* light blue tint — derived from brand */
  --color-brand-tint-hover: #F0F7FF; /* slightly lighter hover variant */
  --color-dark:           #0A0E1A;
  --color-dark-surface:   #141A2E;
  --color-light:          #FAFAFA;
  --color-white:          #FFFFFF;
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #F8FAFC;
  --color-border:         #E2E8F0;
  --color-border-dark:    #1E2D4A;
  --color-border-inverse: rgba(255,255,255,0.35);
  --color-whatsapp:       #25D366;
  --color-success:        #10B981;
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-hero:        clamp(40px, 5.5vw, 72px);
  --font-display:     clamp(34px, 4vw, 52px);
  --font-heading:     clamp(28px, 3vw, 38px);
  --font-subheading:  clamp(20px, 2vw, 26px);
  --font-lead:        clamp(18px, 1.5vw, 20px);
  --font-body:        clamp(16px, 1.2vw, 17px);
  --font-small:       14px;
  --font-caption:     12px;
  --font-nav-mobile: 18px;
  --font-card-title: 18px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl:  128px;
  --btn-padding-v: 14px;
  --btn-padding-h: 28px;
  --container-max:     1200px;
  --container-padding: 24px;
  --space-section:     clamp(64px, 8vw, 96px);
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   350ms ease;
}