/* ==========================================================================
   Design tokens: madsymbol.com
   Palette from the owner's mockups. Everything else stays quiet so the
   symbol is always the hero.
   ========================================================================== */

/* Self-hosted, subset fonts (tools/subset-fonts.py) */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* The proposed dirham symbol (U+E000), merged into the Bricolage family via unicode-range,
   so any text set in Bricolage renders ꝺ with no extra class. Built by tools/build-font.py */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/mad-symbol-300.woff2?v=4") format("woff2"); font-weight: 300; font-display: block; unicode-range: U+E000; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/mad-symbol-400.woff2?v=4") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+E000; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/mad-symbol-600.woff2?v=4") format("woff2"); font-weight: 600; font-display: block; unicode-range: U+E000; }
/* Almarai has no SemiBold: 600 requests resolve to Bold (700). */
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-300.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  /* Brand */
  --red: #A3172B;          /* Marrakech red: between #C1272D and burgundy, main immersive panels */
  --red-deep: #7E0F20;     /* shadows / pressed state on red */
  --fes: #0B3B2E;          /* deep Fes green: kept for construction, press, accents */
  --fes-raised: #114635;   /* raised surface on green */
  --emerald: #127A5B;      /* links, interactive, positive amounts */
  --saffron: #F2B33D;      /* rare accent: badges, focus on green */
  --ink: #14211C;          /* text */
  --mist: #EEF1EC;         /* page background */
  --white: #FFFFFF;
  --brick: #A8442C;        /* "don't" examples only: 5.9:1 on white */
  --night: #1B1214;        /* warm near-black for dark sections (kit, dark cards) */
  --night-raised: #271A1D;
  --ink-deep: #120B0D;     /* code blocks on night */

  /* Derived (contrast checked on --mist) */
  --ink-muted: #56625C;    /* 5.4:1 on mist */
  --ink-faint: #8A948F;    /* decorative only, not for text */
  --line: rgb(20 33 28 / 0.10);
  --line-strong: rgb(20 33 28 / 0.18);
  --surface: var(--white);
  --surface-sunk: #E4E9E3;

  /* On green */
  --on-green: #EAF1EC;
  --on-green-muted: rgb(234 241 236 / 0.72);
  --on-green-line: rgb(234 241 236 / 0.16);

  /* Type */
  --font-sans: "Bricolage Grotesque", "Almarai", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;
  --fs-lede: clamp(1.125rem, 1.02rem + 0.55vw, 1.375rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --fs-display: clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem);
  --lh-body: 1.55;
  --lh-tight: 1.04;
  --track-display: -0.035em;
  --track-heading: -0.022em;

  /* Space (rem so it scales with the user's text size) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --max: 76rem;
  --max-narrow: 44rem;

  /* Shape */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  /* Depth: soft, low, green-tinted */
  --shadow-1: 0 1px 2px rgb(11 59 46 / 0.06), 0 2px 8px rgb(11 59 46 / 0.04);
  --shadow-2: 0 2px 4px rgb(11 59 46 / 0.06), 0 12px 32px rgb(11 59 46 / 0.08);

  /* Motion: critically damped feel, no bounce by default */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-press: 100ms;
  --t-fast: 180ms;
  --t-base: 320ms;

  --header-h: 4rem;
}

/* Arabic: no negative tracking, more generous leading for Almarai */
:root:lang(ar) {
  --lh-body: 1.8;
  --lh-tight: 1.3;
  --track-display: 0;
  --track-heading: 0;
}