/* ============================================================
   CSS Custom Properties — Single Source of Truth
   ============================================================ */

:root {
  /* ── COLORS ──────────────────────────────────────────────── */

  /* Primary Brand */
  --color-primary-navy:   #252F6C;   /* Logo, headings, nav, footer bg */
  --color-primary-gold:   #FFC300;   /* Accents, CTAs, highlights, tagline */

  /* Navy Shades */
  --color-navy-dark:      #1E2454;   /* Hover states, footer, dark sections */
  --color-navy-light:     #EEF0F7;   /* Section backgrounds */
  --color-navy-tint:      #D4D8E8;   /* Borders, subtle dividers */

  /* Gold Shades */
  --color-gold-light:     #FFD54F;   /* Button hover, link hover glow */
  --color-gold-dark:      #D6AB14;   /* Pressed states, gold on white (AA contrast) */

  /* Neutrals */
  --color-dark-text:      #1A1A2E;   /* Headings on white */
  --color-body-text:      #4A4A5A;   /* Paragraphs */
  --color-white:          #FFFFFF;
  --color-light-gray:     #F7F8FA;   /* Alternating section bg */
  --color-border:         #E0E0E0;
  --color-overlay:        rgba(37, 47, 108, 0.85);  /* Portfolio hover overlay */

  /* Functional */
  --color-whatsapp:       #25D366;
  --color-success:        #22C55E;
  --color-error:          #EF4444;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */

  --font-heading:  'Poppins', 'Segoe UI', sans-serif;
  --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Fluid type scale using clamp() — mobile → desktop */
  --text-h1:   clamp(2rem, 5vw, 3rem);         /* 32px → 48px */
  --text-h2:   clamp(1.75rem, 4vw, 2.25rem);   /* 28px → 36px */
  --text-h3:   clamp(1.375rem, 3vw, 1.75rem);  /* 22px → 28px */
  --text-h4:   clamp(1.125rem, 2.5vw, 1.375rem);/* 18px → 22px */
  --text-body: 1rem;        /* 16px */
  --text-sm:   0.875rem;    /* 14px */
  --text-xs:   0.75rem;     /* 12px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */

  /* ── SPACING ─────────────────────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section vertical padding (fluid) */
  --section-py: clamp(3rem, 8vw, 6rem);

  /* ── RADIUS ──────────────────────────────────────────────── */

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 48px rgba(37,47,108,0.18);
  --shadow-navy: 0 8px 24px rgba(37,47,108,0.24);

  /* ── TRANSITIONS ─────────────────────────────────────────── */

  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* ── LAYOUT ──────────────────────────────────────────────── */

  --container-max:    1280px;
  --container-pad:    clamp(1rem, 5vw, 2rem);  /* 16px → 32px */
  --nav-height:       80px;
  --nav-height-mobile: 64px;

  /* ── Z-INDEX ─────────────────────────────────────────────── */

  --z-below:     -1;
  --z-base:       0;
  --z-above:      10;
  --z-sticky:     100;
  --z-nav:        200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-whatsapp:   250;
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}