/* ============================================================
   MAWADDA TRADING — Design Tokens
   Single source of truth. Do not scatter raw values elsewhere.
   ============================================================ */
:root {
  /* ---- Color system ---- */
  --c-brown:        #683B11;
  --c-espresso:     #24150D;
  --c-dark-brown:   #3A2114;
  --c-brown-2:      #77481A;
  --c-bronze:       #B88955;
  --c-gold:         #C59A62;
  --c-beige:        #EDE3D7;
  --c-cream:        #F5EFE7;
  --c-ivory:        #FAF7F2;
  --c-charcoal:     #171513;
  --c-white:        #FFFFFF;

  /* semantic */
  --c-ink:          var(--c-charcoal);
  --c-body-light:   #5C5147;   /* body text on light bg */
  --c-body-dark:    #C8B8A6;   /* body text on dark bg  */
  --c-line-light:   rgba(104, 59, 17, .16);
  --c-line-dark:    rgba(197, 154, 98, .22);
  --c-overlay:      rgba(23, 21, 19, .55);
  --c-scrim-hero:   linear-gradient(105deg, rgba(23,21,19,.82) 0%, rgba(36,21,13,.62) 42%, rgba(36,21,13,.18) 78%);

  /* ---- Typography ---- */
  --font-display:   "Cormorant Garamond", "Times New Roman", serif;
  --font-ui:        "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:        clamp(3.2rem, 8.2vw, 9.4rem);
  --fs-h1:          clamp(2.6rem, 6vw, 6.4rem);
  --fs-h2:          clamp(2.2rem, 4.6vw, 4.6rem);
  --fs-h3:          clamp(1.5rem, 2.6vw, 2.4rem);
  --fs-h4:          clamp(1.15rem, 1.8vw, 1.5rem);
  --fs-body:        clamp(1rem, 1.1vw, 1.125rem);
  --fs-label:       clamp(.72rem, .85vw, .8rem);
  --fs-tiny:        .78rem;

  --ls-label:       .32em;
  --ls-wide:        .12em;

  /* ---- Spacing rhythm ---- */
  --space-3xs:      .25rem;
  --space-2xs:      .5rem;
  --space-xs:       .75rem;
  --space-s:        1.25rem;
  --space-m:        2rem;
  --space-l:        3.25rem;
  --space-xl:       5rem;
  --space-2xl:      8rem;
  --space-3xl:      clamp(6rem, 12vw, 13rem);   /* section vertical */

  /* ---- Layout ---- */
  --container:      1500px;
  --container-wide: 1760px;   /* editorial bleed */
  --container-max:  clamp(1.25rem, 5vw, 6rem);
  --gutter:         clamp(1.25rem, 3vw, 3rem);
  --nav-h:          5.5rem;

  /* ---- Shape ---- */
  --radius-none:    0;
  --radius-xs:      2px;
  --radius-s:       4px;

  /* ---- Elevation (used sparingly) ---- */
  --shadow-card:    0 24px 60px -28px rgba(23, 21, 19, .38);
  --shadow-modal:   0 40px 120px -30px rgba(23, 21, 19, .55);

  /* ---- Motion ---- */
  --ease-out:       cubic-bezier(.22, 1, .36, 1);
  --ease-lux:       cubic-bezier(.65, 0, .35, 1);
  --dur-fast:       220ms;
  --dur-base:       420ms;
  --dur-slow:       700ms;
  --dur-reveal:     900ms;

  /* ---- Z-index ladder ---- */
  --z-base:         1;
  --z-media:        2;
  --z-content:      10;
  --z-nav:          100;
  --z-menu:         200;
  --z-cursor:       400;
  --z-overlay:      500;   /* page transition */
  --z-modal:        800;   /* cookie */
  --z-gate:         900;   /* age verification */
  --z-loader:       950;
}