/* ==========================================================================
   UNIFIED CONCEPTS - DESIGN TOKENS & CSS VARIABLES
   Brand Color System: Navy + Teal + Orange + Pink
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --brand-navy: #051A49;
  --brand-teal: #02A1A6;
  --brand-teal-hover: #018C90;
  --brand-orange: #FC8E14;
  --brand-pink: #ED1E74;

  /* ── Background System ── */
  --bg-primary: #FFFFFF;
  --bg-alt: #F8FAFC;
  --bg-dark: #051A49;
  --bg-dark-surface: #0A2460;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --bg-glass-dark: rgba(5, 26, 73, 0.92);

  /* ── Text Colors ── */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #CBD5E1;

  /* ── Accent Colors (mapped from brand) ── */
  --accent-cyan: #02A1A6;
  --accent-magenta: #ED1E74;
  --accent-primary: #018C90;
  --accent-hover: #017A7E;
  --accent-light: #E6F7F8;
  --accent-whatsapp: #25D366;
  --accent-whatsapp-hover: #1DA851;

  /* ── Borders & Dividers ── */
  --border-color: #E5E7EB;
  --border-light: #EEF2F7;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* ── Shadows (Navy-tinted for brand consistency) ── */
  --shadow-sm: 0 1px 2px 0 rgba(5, 26, 73, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(5, 26, 73, 0.06), 0 2px 4px -2px rgba(5, 26, 73, 0.04);
  --shadow-lg: 0 10px 25px -5px rgba(5, 26, 73, 0.08), 0 8px 10px -6px rgba(5, 26, 73, 0.04);
  --shadow-xl: 0 10px 35px rgba(5, 26, 73, 0.06);
  --shadow-glow: 0 10px 30px rgba(2, 161, 166, 0.25);

  /* ── Spacing (8px System) ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 120px;
  --space-20: 160px;

  /* ── Layout Boundaries ── */
  --max-width: 1400px;
  --content-width: 1280px;
  --topbar-height: 40px;
  --navbar-height: 80px;

  /* ── Border Radii ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 14px;

  /* ── Transitions & Timing Functions ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 250ms var(--ease-out-expo);
  --transition-normal: 350ms var(--ease-out-expo);
  --transition-slow: 600ms var(--ease-out-expo);

  /* ── Z-Index Hierarchy ── */
  --z-negative: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-topbar: 200;
  --z-header: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
}