/**
 * WakeelZone — CSS Design System
 * ─────────────────────────────────────────────────
 * SINGLE SOURCE OF TRUTH for the entire website.
 * Change colors, fonts, radius, or shadows here
 * and the whole site updates automatically.
 * ─────────────────────────────────────────────────
 */

:root {

  /* ── Brand: Navy ───────────────────────────────── */
  --clr-primary:          #1B3A6B;   /* Deep Navy — main brand */
  --clr-primary-dark:     #0D1F3C;   /* Midnight Navy — footer, dark sections */
  --clr-primary-mid:      #1E3F73;   /* Mid Navy */
  --clr-primary-light:    #2D5F9E;   /* Lighter Navy — hover states */
  --clr-primary-50:       #EBF0F8;   /* Lightest navy tint — bg highlights */
  --clr-primary-100:      #C5D4EC;   /* Light navy tint */

  /* ── Brand: Gold ───────────────────────────────── */
  --clr-gold:             #C9A84C;   /* Primary Gold — CTAs, accents */
  --clr-gold-dark:        #A8853A;   /* Deep Gold — hover */
  --clr-gold-light:       #E4C97A;   /* Light Gold — subtle accents */
  --clr-gold-50:          #FBF6E7;   /* Gold tint background */

  /* ── Neutrals ──────────────────────────────────── */
  --clr-bg:               #FAFAF8;   /* Warm off-white — body background */
  --clr-surface:          #FFFFFF;   /* Card / component backgrounds */
  --clr-surface-2:        #F5F3EE;   /* Subtle section background */
  --clr-surface-3:        #EEEAE3;   /* Slightly darker surface */

  --clr-text:             #0A1628;   /* Primary text — headings */
  --clr-text-2:           #3D4A5C;   /* Secondary text — body */
  --clr-text-3:           #4B5563;   /* Tertiary — descriptions */
  --clr-text-muted:       #9CA3AF;   /* Muted — labels, captions */
  --clr-text-inverse:     #FFFFFF;   /* On dark backgrounds */

  --clr-border:           #E8E4DC;   /* Default border */
  --clr-border-light:     #F0EDE8;   /* Subtle border */
  --clr-border-dark:      #D4CECC;   /* Stronger border */

  /* ── Status Colors ─────────────────────────────── */
  --clr-success:          #10B981;
  --clr-success-bg:       #D1FAE5;
  --clr-warning:          #F59E0B;
  --clr-warning-bg:       #FEF3C7;
  --clr-error:            #EF4444;
  --clr-error-bg:         #FEE2E2;

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

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

  --leading-tight:        1.2;
  --leading-snug:         1.35;
  --leading-normal:       1.6;
  --leading-relaxed:      1.75;

  /* ── Border Radius ─────────────────────────────── */
  --radius-xs:            4px;
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            20px;
  --radius-xl:            28px;
  --radius-2xl:           40px;
  --radius-full:          9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-xs:            0 1px 2px  rgba(10, 22, 40, 0.04);
  --shadow-sm:            0 2px 8px  rgba(10, 22, 40, 0.06);
  --shadow-md:            0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-lg:            0 8px 32px rgba(10, 22, 40, 0.12);
  --shadow-xl:            0 16px 48px rgba(10, 22, 40, 0.16);
  --shadow-2xl:           0 24px 64px rgba(10, 22, 40, 0.20);
  --shadow-gold:          0 4px 24px rgba(201, 168, 76, 0.30);
  --shadow-gold-lg:       0 8px 40px rgba(201, 168, 76, 0.40);
  --shadow-navy:          0 4px 24px rgba(27, 58, 107, 0.25);
  --shadow-navy-lg:       0 8px 40px rgba(27, 58, 107, 0.35);

  /* ── Transitions ───────────────────────────────── */
  --ease-fast:            150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:            300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:            500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:          400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:          600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:              300ms cubic-bezier(0.4, 0, 1, 1);
  --ease-out:             300ms cubic-bezier(0, 0, 0.2, 1);

  /* ── Layout ────────────────────────────────────── */
  --container-max:        1200px;
  --container-px:         1.5rem;    /* 24px */
  --section-py:           5.5rem;    /* 88px */
  --nav-height:           72px;

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

/* ── Mobile overrides ──────────────────────────── */
@media (max-width: 767px) {
  :root {
    --section-py:         3.5rem;    /* 56px */
    --container-px:       1.25rem;   /* 20px */
    --nav-height:         64px;
  }
}