/* ============================================================
   CSS Custom Properties — Najeeda Corporate Services
   ============================================================ */

:root {
  /* ─── Brand Colors ─────────────────────────────────────── */
  --clr-primary:        #0A7B50;
  --clr-primary-dark:   #146C43;
  --clr-primary-deeper: #085c3c;
  --clr-primary-alpha:  rgba(10,123,80,.08);
  --clr-primary-border: rgba(10,123,80,.18);
  --clr-gold:           #C9A13A;
  --clr-gold-light:     rgba(201,161,58,.15);
  --clr-dark:           #0F2A1E;

  /* ─── Neutrals ─────────────────────────────────────────── */
  --clr-white:          #ffffff;
  --clr-bg:             #F8FAFC;
  --clr-bg-card:        #ffffff;
  --clr-bg-muted:       #F1F5F9;
  --clr-text:           #1E293B;
  --clr-text-muted:     #475569;
  --clr-text-light:     #64748B;
  --clr-text-xlight:    #94A3B8;
  --clr-border:         rgba(15,23,42,.08);
  --clr-border-strong:  rgba(15,23,42,.14);
  --clr-divider:        rgba(15,23,42,.05);

  /* ─── Semantic ─────────────────────────────────────────── */
  --clr-success:    #16a34a;
  --clr-success-bg: #f0fdf4;
  --clr-error:      #dc2626;
  --clr-error-bg:   #fef2f2;
  --clr-warning:    #d97706;
  --clr-warning-bg: #fffbeb;
  --clr-info:       #2563eb;
  --clr-info-bg:    #eff6ff;

  /* ─── Typography ───────────────────────────────────────── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-arabic:  'Alexandria', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   21px;
  --text-2xl:  26px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  56px;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-wide:  .04em;
  --tracking-wider: .1em;
  --tracking-widest:.3em;

  /* ─── Spacing ──────────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-7:  28px;  --sp-8:  32px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;
  --sp-24: 96px;  --sp-32: 128px;

  /* ─── Border Radius ────────────────────────────────────── */
  --r-sm:   6px;    --r-md:   10px;   --r-lg:   16px;
  --r-xl:   22px;   --r-2xl:  30px;   --r-full: 9999px;

  /* ─── Shadows ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 4px 12px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 48px rgba(15,23,42,.12);
  --shadow-xl: 0 24px 64px rgba(15,23,42,.16);
  --shadow-primary: 0 14px 34px -12px rgba(10,123,80,.55);
  --shadow-gold:    0 8px 24px -8px rgba(201,161,58,.4);
  --shadow-card:    0 2px 8px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);

  /* ─── Transitions ──────────────────────────────────────── */
  --t-fast:   .15s ease;
  --t-base:   .25s ease;
  --t-slow:   .4s ease;
  --t-spring: .3s cubic-bezier(0.34, 1.56, 0.64, 1);

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

  /* ─── Layout ───────────────────────────────────────────── */
  --container:   1240px;
  --container-sm: 760px;
  --nav-height:  80px;
  --section-y:   96px;
}

/* ─── Mobile Overrides ───────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --nav-height:   56px;
    --section-y:    64px;
    --bnav-height:  58px;
  }
}

/* ─── Dark Mode ──────────────────────────────────────────── */
[data-theme="dark"] {
  --clr-bg:           #08100d;
  --clr-bg-card:      #0f1e18;
  --clr-bg-muted:     #131f19;
  --clr-text:         #e2e8f0;
  --clr-text-muted:   #94a3b8;
  --clr-text-light:   #64748b;
  --clr-text-xlight:  #475569;
  --clr-border:       rgba(255,255,255,.06);
  --clr-border-strong:rgba(255,255,255,.12);
  --clr-divider:      rgba(255,255,255,.04);
  --clr-white:        #0f1e18;

  --shadow-xs: 0 1px 3px rgba(0,0,0,.3);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.4);
  --shadow-card: 0 2px 8px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);
}