/* =========================================================
   NOOR JABAL DECORATION — Design Tokens
   ========================================================= */

:root {
  /* ── Colors ─────────────────────────────── */
  --clr-black:      #0A0A0A;
  --clr-charcoal:   #151515;
  --clr-charcoal-2: #1C1C1C;
  --clr-charcoal-3: #242424;
  --clr-dark-mid:   #2E2E2E;
  --clr-mid:        #5A5A5A;
  --clr-light-mid:  #8A8A8A;
  --clr-border:     #2A2A2A;
  --clr-border-lt:  #E8E4DB;

  --clr-ivory:      #F5F1E8;
  --clr-ivory-2:    #F0EBE0;
  --clr-cream:      #FAF8F4;
  --clr-white:      #FFFFFF;

  --clr-gold:       #C9A45C;
  --clr-gold-lt:    #D4B472;
  --clr-gold-dk:    #A8843A;
  --clr-bronze:     #7C6337;

  /* ── Typography ──────────────────────────── */
  --font-serif:  'Cormorant Garamond', 'Georgia', serif;
  --font-sans:   'Manrope', 'Inter', sans-serif;

  /* ── Font Sizes (fluid clamp) ────────────── */
  --fs-hero:    clamp(3rem, 7vw, 7rem);
  --fs-h1:      clamp(2.5rem, 5vw, 5rem);
  --fs-h2:      clamp(2rem, 3.5vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h4:      clamp(1.2rem, 1.8vw, 1.6rem);
  --fs-xl:      clamp(1.1rem, 1.4vw, 1.25rem);
  --fs-base:    clamp(0.9rem, 1.1vw, 1rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-eyebrow: 0.7rem;

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

  /* ── Container ───────────────────────────── */
  --container-max:  1400px;
  --container-pad:  clamp(1.25rem, 5vw, 5rem);

  /* ── Transitions ─────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-snap:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:      200ms;
  --dur-mid:       400ms;
  --dur-slow:      700ms;
  --dur-xslow:     1200ms;

  /* ── Border Radius ───────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* ── Shadows ─────────────────────────────── */
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.08);
  --shadow-md:  0 8px 40px rgba(0,0,0,0.14);
  --shadow-lg:  0 20px 80px rgba(0,0,0,0.22);
  --shadow-gold: 0 4px 24px rgba(201,164,92,0.18);

  /* ── Header ──────────────────────────────── */
  --header-h:   80px;
  --header-h-sm: 64px;
}