/* ─── MAWADDA TRADING · Design Tokens ─── */
:root {
  color-scheme: light dark;
  -webkit-tap-highlight-color: rgba(184, 137, 85, .35);
}
:root {
  /* color */
  --brown: #683B11;
  --espresso: #24150D;
  --dark: #3A2114;
  --brown2: #77481A;
  --bronze: #B88955;
  --gold: #C59A62;
  --beige: #EDE3D7;
  --cream: #F5EFE7;
  --ivory: #FAF7F2;
  --charcoal: #171513;
  --white: #FFFFFF;
  --ink: #2B1D12;          /* body text on light */
  --ink-soft: #6B5A4A;
  --line: rgba(104, 59, 17, .18);        /* hairline on light */
  --line-dark: rgba(245, 239, 231, .16); /* hairline on dark */
  --overlay-espresso: rgba(36, 21, 13, .55);

  /* type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", sans-serif;
  --arabic: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  --fs-display: clamp(3.4rem, 9.2vw, 8.6rem);
  --fs-display2: clamp(2.6rem, 6vw, 5.4rem);
  --fs-h1: clamp(2.4rem, 5.4vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3.1rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.28rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .72rem;

  /* spacing rhythm */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 7rem;
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);

  /* layout */
  --container: 1400px;
  --container-wide: 1560px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* shape */
  --r-sm: 2px;
  --r-md: 4px;

  /* elevation */
  --shadow-1: 0 18px 50px -22px rgba(36, 21, 13, .35);
  --shadow-2: 0 34px 90px -30px rgba(36, 21, 13, .5);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-lux: cubic-bezier(.65, 0, .25, 1);
  --t-fast: .28s;
  --t-med: .55s;
  --t-slow: .9s;

  /* z */
  --z-nav: 900;
  --z-menu: 940;
  --z-age: 1000;
  --z-cookies: 950;
  --z-loader: 1100;

  /* thresholds */
  --bp-sm: 640px;
  --bp-md: 880px;
  --bp-lg: 1120px;
}

/* dark editorial sections opt-in tokens */
.theme-dark {
  color: var(--cream);
  background-color: var(--espresso);
  --ink: var(--cream);
  --ink-soft: var(--beige);
  --line: var(--line-dark);
}
.theme-espresso { background-color: var(--espresso); }
.theme-charcoal { background-color: var(--charcoal); }
.theme-brown { background-color: var(--dark); }
.theme-cream { background-color: var(--cream); color: var(--ink); }
.theme-ivory { background-color: var(--ivory); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  :root {
  color-scheme: light dark;
  -webkit-tap-highlight-color: rgba(184, 137, 85, .35);
}
:root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; }
}

/* interaction foundations */
button, a, [tabindex] { touch-action: manipulation; }
h1, h2, h3, h4, h5, h6, [id^="ph-"] { scroll-margin-top: 6.5rem; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.tabular, .hero-progress .count, time { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}