/* ==========================================================================
   Design tokens — the single source of truth for color, type and space.
   CONVENTIONS: no raw hex in components. Components use the semantic roles
   below, never the raw palette names.
   ========================================================================== */

:root {
  /* --- Palette "IVOIRE" — raw values. Do not use these directly. -------- */
  --c-ivory:    #F4F0E9;
  --c-bone:     #E6DFD2;
  --c-taupe:    #A79B8A;
  --c-umber:    #4A4238;
  --c-espresso: #211C16;

  /* --- Semantic roles — use these. ------------------------------------- */
  /* Contrast measured against the ground each role sits on. AA is 4.5:1.  */
  --surface:            var(--c-ivory);
  --surface-alt:        var(--c-bone);
  --surface-invert:     var(--c-espresso);

  --ink:                var(--c-espresso);  /* 14.88:1 on ivory  ✓ */
  --ink-secondary:      var(--c-umber);     /*  8.69:1 on ivory  ✓ */
  --ink-invert:         var(--c-ivory);     /* 14.88:1 on espresso ✓ */
  --ink-invert-secondary: var(--c-taupe);   /*  6.20:1 on espresso ✓ */

  /* TAUPE is a 2.40:1 mid-tone on ivory — it FAILS AA as text and even the
     3:1 large-text floor. The brand pack lists it for "captions, rules";
     rules only is the resolution (TODO B12). It is deliberately exposed
     here as a non-text role so it cannot be reached for as a text color. */
  --rule:               var(--c-taupe);
  --rule-soft:          var(--c-bone);
  --motif:              var(--c-espresso);

  --focus-ring:         var(--c-espresso);
  --focus-ring-invert:  var(--c-ivory);

  /* --- Type families ---------------------------------------------------- */
  --family-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --family-support: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --family-arabic:  "Montserrat Arabic", system-ui, -apple-system, sans-serif;

  /* --- Type ROLES. Components reference only these. --------------------
     A :lang(ar) block below re-points them. This is the mechanism that
     keeps Arabic from ever being letterspaced or uppercased. ------------- */
  --font-heading:  var(--family-display);
  --font-body:     var(--family-support);
  --font-label:    var(--family-support);

  --tracking-display: 0.18em;
  --tracking-label:   0.14em;
  --transform-display: uppercase;
  --transform-label:   uppercase;

  --leading-tight: 1.15;
  --leading-body:  1.62;

  --weight-body:    400;
  --weight-medium:  500;
  --weight-strong:  600;
  --weight-display: 400;

  /* --- Scale ------------------------------------------------------------ */
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.125rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.18vw, 2.61rem);
  --step-4:  clamp(2.07rem, 1.68rem + 1.94vw, 3.50rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --measure: 62ch;
  --measure-narrow: 44ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --page-max: 74rem;

  --hairline: 1px;
  --radius: 0;               /* the identity is square; no rounding */
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Arabic overrides. CONVENTIONS: never letterspace or uppercase Arabic;
   hierarchy comes from weight and size. Body line-height >= 1.75.
   Cormorant has no Arabic coverage, so the Arabic face carries every role.
   -------------------------------------------------------------------------- */
:lang(ar) {
  --font-heading: var(--family-arabic);
  --font-body:    var(--family-arabic);
  --font-label:   var(--family-arabic);

  --tracking-display: 0;
  --tracking-label:   0;
  --transform-display: none;
  --transform-label:   none;

  --leading-tight: 1.35;
  --leading-body:  1.85;

  --weight-display: 500;
}