/* ==========================================================================
   Design tokens — النادي العقاري

   The page runs on two surfaces, not one: INK (deep navy-black, for the
   photographic chapters) and BONE (warm off-white, for the editorial and
   trust chapters). Alternating them is what gives the page its rhythm, and
   it is what lets the partner logos appear in their own brand colours.

   Accent green is rationed deliberately — calls to action and little else.
   ========================================================================== */

:root {
  /* ---- Brand, straight off the logo ------------------------------------ */
  --brand-navy: #153a6f;
  --brand-green: #37c27f;

  /* ---- Ink surfaces ----------------------------------------------------- */
  --ink-950: #040a13;  /* footer and the projects chapter */
  --ink-900: #071220;  /* dark chapters */

  /* ---- Bone surfaces ----------------------------------------------------- */
  --bone-100: #f5f2ec; /* light chapters */

  /* ---- Type on ink -------------------------------------------------------- */
  --ink-fg: #f7f5f1;
  --ink-fg-soft: #a7b4c4;
  --ink-fg-dim: #66788d;

  /* ---- Type on bone ------------------------------------------------------- */
  --bone-fg: #0b1622;
  --bone-fg-soft: #4e5967;
  --bone-fg-dim: #8b8878;

  /* ---- Accent ------------------------------------------------------------- */
  --accent: var(--brand-green);
  --accent-lift: #57d99b;  /* hover on ink */
  --accent-ink: #0d6b43;   /* passes contrast on bone */

  /* ---- Hairlines ----------------------------------------------------------- */
  --rule-on-ink: rgba(167, 180, 196, 0.18);
  --rule-on-ink-soft: rgba(167, 180, 196, 0.1);
  --rule-on-bone: rgba(11, 22, 34, 0.14);
  --rule-on-bone-soft: rgba(11, 22, 34, 0.07);

  /* ---- Type ---------------------------------------------------------------
     One family throughout: IBM Plex Sans Arabic. It is the register Saudi
     corporate sites are set in — plain, high-clarity, no calligraphic
     styling to decode at a glance. Hierarchy comes from weight and size
     rather than from a second, more decorative face. */
  --font-display: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text: var(--font-display);

  --fs-hero: clamp(2.9rem, 0.9rem + 8.2vw, 7.25rem);
  --fs-display: clamp(2.1rem, 1rem + 5vw, 4.5rem);
  --fs-display-sm: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, 0.97rem + 0.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  --lh-hero: 1.16;
  --lh-display: 1.22;
  --lh-body: 1.95;

  /* Arabic letterforms join, so tracking stays at zero everywhere except the
     small caps labels, where it is slight enough not to break the joins. */
  --track-label: 0.06em;

  /* ---- Space ---------------------------------------------------------------- */
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  --chapter-y: clamp(3.75rem, 2rem + 5.2vw, 7rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --container: 1320px;

  /* ---- Geometry -------------------------------------------------------------
     Square by default — the mark is drawn from straight architectural lines,
     so rounded corners fight it. Buttons take the barest chamfer; only the
     floating action button is a pill. */
  --radius-btn: 2px;

  /* ---- Motion ----------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 360ms;
  --dur-slow: 780ms;

  /* ---- Layers ------------------------------------------------------------------ */
  --z-header: 100;
  --z-drawer: 120;
  --z-float: 90;
}