/* ─────────────────────────────────────────────────────────────────────
   MATI design tokens.

   Raw values are the production ones from mati.earth's frontend, by way
   of the MATI design system bundle: nine warm earth neutrals plus one
   accent, MATI Blue. That is the entire brand palette. The seven-colour
   data palette exists only for charts.

   Everything above the raw layer is a semantic alias. Author against the
   aliases, never the raw browns. MATI 500 is the fixed midpoint of the
   tonal range and is never used for headings, body or captions.
   ───────────────────────────────────────────────────────────────────── */

:root{
  /* ── Raw palette ─────────────────────────────────────────────────── */
  --mati-900:#1E1A18; --mati-800:#3B3331; --mati-700:#574C49; --mati-600:#746462;
  --mati-500:#907D7A; --mati-400:#A99894; --mati-300:#C6B2AE; --mati-200:#DACDC7;
  --mati-100:#F3E7E1;
  --mati-blue:#579BDA;   /* PMS 2915, the one accent */

  /* Charts only, used in this order: browns, then blue, then yellow and
     orange, then the rest when more separation is genuinely needed. */
  --data-blue:#579BDA; --data-yellow:#D4A900; --data-orange:#F57200;
  --data-green:#3BB25D; --data-red:#E84D61; --data-purple:#9A73DE;
  --data-beige:#907D7A;

  /* State. Not brand expression: reserved for a draft or a warning, so a
     reader can tell at a glance that something is unresolved. */
  --state-warn:#F57200;

  /* ── Semantic aliases. Light. ────────────────────────────────────── */
  --surface-page:var(--mati-100);
  --surface-raised:var(--mati-200);
  --surface-card:var(--mati-200);
  --surface-inverse:var(--mati-900);

  --text-display:var(--mati-900);
  --text-body:var(--mati-900);
  --text-body-subtle:var(--mati-700);
  --text-muted:var(--mati-600);
  --text-label:var(--mati-600);
  --text-footer:var(--mati-500);

  --border-divider:var(--mati-300);
  --accent:var(--mati-blue);
  /* What sits on top of an inverted fill: the label inside a filled pill
     or a pressed button. Flips with the rest of the aliases. */
  --text-on-inverse:var(--mati-100);

  /* ── Type ────────────────────────────────────────────────────────── */
  --font-head:'Season Serif',Georgia,'Times New Roman',serif;
  --font-body:'Sharp Earth',system-ui,-apple-system,sans-serif;
  --font-ui:'Sharp Earth',system-ui,-apple-system,sans-serif;
  /* Sharp Earth Devanagari is MATI's own commissioned Devanagari face, not
     a Noto substitute. Noto stays behind it only as a fallback. */
  --font-deva:'Sharp Earth Devanagari','Noto Sans Devanagari',var(--font-ui);

  --ts-display:clamp(38px,6.2vw,66px);
  --ts-h2:clamp(27px,3.6vw,48px);
  --ts-h3:clamp(21px,2.2vw,32px);
  --ts-lede:clamp(19px,2vw,22px);
  --ts-body:17px;
  --ts-small:14px;
  --ts-label:11px;

  --lh-head:1.1;
  --tr-head:-.02em;      /* Season Serif runs -2% */
  --tr-label:.08em;      /* ALL CAPS labels run +8% */
  --max-ch:50ch;         /* body copy measure */

  /* ── Layout. One derived unit. ───────────────────────────────────── */
  /* G is 2% of the composition width, 18px at mobile to 40px at 1920.
     Every gap, pad and margin is a multiple of G. There is no second
     spacing scale: the quarter and three-quarter steps here are the
     system's own --gut-25 and --gut-75, not a scale beside it. */
  --g:clamp(18px,2vw,40px);
  --g-quarter:calc(var(--g) * .25);
  --g-half:calc(var(--g) * .5);
  --g-three-quarter:calc(var(--g) * .75);
  --g2:calc(var(--g) * 2);
  --g3:calc(var(--g) * 3);
  --g4:calc(var(--g) * 4);
  --site-max:2000px;
  --read-max:1120px;

  /* ── Corners ─────────────────────────────────────────────────────── */
  --r-xs:.4rem; --r-sm:.5rem; --r-md:1rem; --r-lg:2rem; --r-pill:999px;
  --r-nested-sm:.5rem; --r-nested-lg:1.25rem;

  /* ── Motion. Scroll-driven and restrained. ───────────────────────── */
  /* The system's own curves. --ease is its ease-out-quint, the GSAP
     expo.out equivalent used for the nav and accordions; --ease-cubic is
     its ease-out-cubic, for image and sepia transitions. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-cubic:cubic-bezier(.33,1,.68,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-in:.6s; --dur:.3s; --dur-fast:.15s;
}

/* The system inverts wholesale between modes. Dark is the site default;
   this report runs light with inverted bands, so .inverse redefines the
   aliases and component CSS needs no inverse variant of its own. */
.inverse{
  --surface-page:var(--mati-900);
  --surface-raised:var(--mati-800);
  --surface-card:var(--mati-800);
  --surface-inverse:var(--mati-100);

  --text-display:var(--mati-200);
  --text-body:var(--mati-100);
  --text-body-subtle:var(--mati-200);
  --text-muted:var(--mati-300);
  --text-label:var(--mati-400);
  --text-footer:var(--mati-500);

  --border-divider:var(--mati-700);
  --text-on-inverse:var(--mati-900);
}

/* ── Primitives shared by anything built on these tokens ──────────── */

/* Neither Season Serif nor Sharp Earth has a bold or an italic cut.
   Never let the browser draw one: a stray font-weight:700 would render
   as a synthetic bold rather than clean regular. */
.mati-type{
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

/* ALL CAPS at +8% tracking. Labels, eyebrows, button text, metadata.
   Never applied to a sentence. */
.mati-label{
  font-family:var(--font-ui);
  font-size:var(--ts-label);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--text-label);
}

/* The line system is the brand's main organising device after negative
   space. 1px, divider colour, always below a title and never above,
   ending at the outer margin and never bleeding to the edge. */
.mati-rule{
  height:1px;
  background:var(--border-divider);
  border:0;
  margin:0;
}