/* ============================================================
   DARESNI DESIGN SYSTEM — OFFICIAL BRAND TOKENS
   Source: Daresni Brand Colour Reference Guide, June 2026
   Font: Plus Jakarta Sans only (no Inter, Poppins, Montserrat)
   ============================================================ */

:root {
  /* Primary */
  --maroon:       #9B1B2B;
  --maroon-dark:  #7A1320;
  --maroon-light: #C2243A;
  --maroon-pale:  rgba(155, 27, 43, 0.07);

  --navy:         #112447;
  --navy-mid:     #1A3468;
  --navy-deep:    #0A1225;
  --navy-pale:    rgba(17, 36, 71, 0.06);

  /* Accent */
  --gold:         #FFD166;
  --gold-dark:    #E6B84A;

  /* Backgrounds */
  --bg:           #F8FAFC;
  --white:        #FFFFFF;

  /* Text */
  --text:         #17212B;
  --text-mid:     #3D4F5D;
  --text-sec:     #5A6B7C;
  --text-light:   #8A9DAF;

  /* Status & utility */
  --success:      #22C55E;
  --border:       rgba(17, 36, 71, 0.09);
  --border-light: rgba(17, 36, 71, 0.05);
  --border-solid: #E2E8F0;

  /* Shadows */
  --shadow-sm:     0 2px 12px rgba(17, 36, 71, 0.07);
  --shadow-md:     0 8px 32px rgba(17, 36, 71, 0.10);
  --shadow-lg:     0 20px 60px rgba(17, 36, 71, 0.13);
  --shadow-maroon: 0 12px 40px rgba(155, 27, 43, 0.22);
  --shadow-phone:  0 40px 80px rgba(0, 0, 0, 0.50);

  /* Overlays — use on dark backgrounds only */
  --ov-nav:        rgba(17, 36, 71, 0.97);
  --ov-maroon:     rgba(155, 27, 43, 0.20);
  --ov-gold:       rgba(255, 209, 102, 0.10);
  --ov-card:       rgba(255, 255, 255, 0.07);
  --ov-text:       rgba(255, 255, 255, 0.70);
  --ov-grid:       rgba(255, 255, 255, 0.025);

  /* Gradients */
  --grad-hero:   linear-gradient(135deg, #112447 0%, #1A3468 55%, #0A1225 100%);
  --grad-maroon: linear-gradient(135deg, #9B1B2B, #C2243A);

  /* Typography */
  --font:        'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-arabic: 'Tajawal', 'Plus Jakarta Sans', sans-serif;

  /* Type scale */
  --tx-xs:   0.75rem;
  --tx-sm:   0.875rem;
  --tx-base: 1rem;
  --tx-md:   1.125rem;
  --tx-lg:   1.25rem;
  --tx-xl:   1.5rem;
  --tx-2xl:  1.875rem;
  --tx-3xl:  2.25rem;
  --tx-4xl:  3rem;
  --tx-5xl:  3.75rem;

  /* Weights */
  --w3: 300;
  --w4: 400;
  --w5: 500;
  --w6: 600;
  --w7: 700;
  --w8: 800;

  /* Leading */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.65;

  /* Tracking */
  --ls-tight:  -0.03em;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* Spacing */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;
  --s32: 8rem;

  /* Layout */
  --mw:    1280px;
  --mw-sm: 640px;
  --mw-md: 768px;
  --mw-lg: 1024px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Z-index */
  --z-nav: 300;
  --z-overlay: 100;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
}