/* =============================================================================
   Design tokens — the ONLY file allowed to contain colour literals.
   Everything else references these custom properties.
   ============================================================================= */
:root {
  /* Brand */
  --c-navy-900: #13244A;   /* footer, large headings */
  --c-navy-700: #1B3A6B;   /* primary button hover */
  --c-blue-600: #1F5AA6;   /* primary button, links */
  --c-blue-50:  #EAF1FB;   /* selected item background */
  --c-cyan-400: #2BA8E0;   /* logo colour — decoration only, never text (2.7:1 on white) */
  --c-gold-500: #E0A800;   /* "featured" badge */
  --c-gold-50:  #FFF7E0;

  /* Neutral */
  --c-bg:       #F4F6FA;
  --c-surface:  #FFFFFF;
  --c-border:   #E1E6EF;
  --c-text:     #0F1B2D;
  --c-text-2:   #4A5568;   /* lowest contrast allowed for secondary text (7.5:1 on white) */

  /* Semantic */
  --c-success:  #1E7F52;
  --c-warning:  #9A6700;
  --c-danger:   #C0342B;
  /* The brief suggested #128C4A, but white text on it measures 4.31:1 (fails AA).
     #107A41 keeps the WhatsApp hue at 5.41:1. */
  --c-whatsapp: #107A41;

  /* ---- Additions (kept here so no colour lives outside this file) ---- */
  --c-whatsapp-700: #0B5E31;          /* WhatsApp hover — 7.9:1 with white */
  --c-on-dark:      #FFFFFF;          /* text on navy / blue / green */
  --c-on-dark-2:    #C3CEE2;          /* secondary text on navy-900 — 9.6:1 */
  --c-success-50:   #EDF7F1;
  --c-danger-50:    #FBEAE9;
  --c-neutral-600:  #5B6475;          /* "suspended" status text — 6:1 on white */
  --c-neutral-50:   #EDEFF3;
  --c-hover:        #EEF2F8;          /* subtle hover background on white */
  --c-on-dark-line: rgb(255 255 255 / .16);   /* dividers on navy */
  --c-on-dark-hover: rgb(255 255 255 / .08);  /* hover/selected background on navy */
  --c-backdrop:     rgb(15 27 45 / .55);
  --c-hero-overlay: linear-gradient(180deg, rgb(19 36 74 / .82) 0%, rgb(19 36 74 / .70) 55%, rgb(19 36 74 / .88) 100%);
  /* navy-only so --c-on-dark-2 text stays above 7:1 across the whole gradient */
  --c-intro-bg:     linear-gradient(135deg, #13244A 0%, #1B3A6B 100%);

  /* Initials avatars — white text on each is ≥ 6.3:1 */
  --c-avatar-1: #1B3A6B;
  --c-avatar-2: #1F5AA6;
  --c-avatar-3: #0F6B6B;
  --c-avatar-4: #5E3A9E;
  --c-avatar-5: #A3324A;
  --c-avatar-6: #85491A;

  /* Business card cover (decorative, never behind text) */
  --c-blue-400: #4C8FD6;
  --c-blue-200: #A9CBEF;

  /* Promo banner + offers */
  --c-promo-bg: linear-gradient(90deg, #13244A 0%, #1F5AA6 100%);

  /* Google sign-in button (brand guidelines) */
  --google-border: #747775;
  --google-text:   #1F1F1F;
  --google-blue:   #4285F4;
  --google-red:    #EA4335;
  --google-yellow: #FBBC05;
  --google-green:  #34A853;

  /* Skeleton loaders */
  --c-skeleton:      #E6EAF1;
  --c-skeleton-glow: #F3F5F9;

  /* Official flag colours (used by the built-in flag artwork) */
  --flag-nl-red:     #AE1C28;
  --flag-nl-white:   #FFFFFF;
  --flag-nl-blue:    #21468B;
  --flag-be-black:   #000000;
  --flag-be-yellow:  #FDDA24;
  --flag-be-red:     #EF3340;
  --flag-es-red:     #AA151B;
  --flag-es-yellow:  #F1BF00;
  --flag-it-green:   #008C45;
  --flag-it-white:   #FFFFFF;
  --flag-it-red:     #CE2B37;
  --flag-unknown:    #CBD2DD;

  /* Typography — Cairo covers both Arabic and Latin */
  --font: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
  --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.25rem;  --fs-xl: 1.5rem;  --fs-2xl: 2rem;  --fs-3xl: 2.5rem;
  --lh-body: 1.7; --lh-heading: 1.3;

  /* Spacing (4px scale) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radius / Shadow / Motion */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(15 27 45 / .06), 0 1px 3px rgb(15 27 45 / .08);
  --sh-2: 0 6px 20px rgb(15 27 45 / .10);
  --sh-3: 0 16px 40px rgb(15 27 45 / .18);
  --ease: cubic-bezier(.2,.7,.2,1); --dur: 200ms;
  --container: 1200px;

  /* Layout */
  --header-h: 72px;
  --tap: 44px;               /* minimum touch target */
  --focus-ring: 3px solid var(--c-blue-600);
  --z-header: 100; --z-dropdown: 150; --z-drawer: 200;
}