/* ==========================================================================
   SAFA BUILDERS — CSS Custom Properties (Design Tokens)
   safabuilders.com
   ========================================================================== */

:root {

  /* ── Brand Colors ── */
  --clr-primary:        #1B3A6B;   /* Deep Navy Blue  */
  --clr-primary-dark:   #142D54;
  --clr-primary-light:  #2D5A9E;
  --clr-primary-xlight: #E8EFF8;

  --clr-secondary:      #C8A96E;   /* Warm Gold (decorative)   */
  --clr-secondary-dark: #A8863E;
  --clr-secondary-text: #8C6A1C;   /* Gold — WCAG AA on white  */
  --clr-secondary-light:#F0E0BC;

  --clr-accent:         #2D6A9F;   /* Medium Blue     */

  /* ── Neutrals ── */
  --clr-white:          #FFFFFF;
  --clr-bg:             #F8F9FC;
  --clr-bg-alt:         #EEF2F7;
  --clr-surface:        #FFFFFF;
  --clr-text:           #1A1A2E;
  --clr-text-light:     #4B5563;
  --clr-text-muted:     #6E7480;   /* ≥4.5:1 on white (WCAG AA) */
  --clr-border:         #E5E7EB;
  --clr-border-light:   #F3F4F6;

  /* ── Status ── */
  --clr-success:        #10B981;
  --clr-warning:        #F59E0B;
  --clr-error:          #EF4444;

  /* ── Typography ── */
  --font-family:        'Poppins', sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-2xl:   1.5rem;     /* 24px */
  --fs-3xl:   1.875rem;   /* 30px */
  --fs-4xl:   2.25rem;    /* 36px */
  --fs-5xl:   3rem;       /* 48px */
  --fs-6xl:   3.75rem;    /* 60px */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm:  0.25rem;
  --radius:     0.5rem;
  --radius-md:  0.625rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow:         0 4px 12px rgba(0,0,0,0.06);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.10);
  --shadow-xl:      0 24px 64px rgba(0,0,0,0.12);
  --shadow-primary: 0 8px 24px rgba(27,58,107,0.24);
  --shadow-gold:    0 8px 24px rgba(200,169,110,0.32);

  /* ── Transitions ── */
  --transition-fast:   all 0.15s ease;
  --transition:        all 0.3s ease;
  --transition-slow:   all 0.5s ease;
  --transition-bounce: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

  /* ── Layout ── */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --section-padding-y: clamp(4rem, 8vw, 7rem);
  --header-height:     80px;

  /* ── Z-Index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}