/* ==========================================================================
   NOIR BARBER — design tokens
   A single, deliberate dark identity: soot, tobacco, ivory, one bronze.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Colour */
  --soot:      #0f0d0b;   /* page ground, warm near-black */
  --tobacco:   #17130f;   /* raised surfaces */
  --leather:   #221b15;   /* deepest accent surface */
  --ivory:     #ede6da;   /* primary text, inverted ground */
  --ash:       #9a9187;   /* secondary text (AA on soot) */
  --bronze:    #b9824f;   /* the one accent */
  --bronze-hi: #d49e6b;   /* accent on hover / small text on dark */
  --bronze-lo: #8a5c33;   /* accent on ivory */
  --line:      rgba(237, 230, 218, .14);
  --line-strong: rgba(237, 230, 218, .28);

  /* Type */
  --f-logo:    "Big Shoulders Display", "Big Shoulders", "Oswald", "Arial Narrow", Impact, sans-serif; /* Latin brand mark only */
  --f-display: "Changa", "Big Shoulders Display", Tahoma, sans-serif;   /* Arabic headings */
  --f-accent:  "Aref Ruqaa", "Changa", serif;                           /* the one emphasised word per heading */
  --f-body:    "Cairo", Tahoma, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* digits only */

  --t-mega:  clamp(8rem, 31vw, 30rem);     /* hero wordmark */
  --t-h1:    clamp(3.2rem, 8.4vw, 8.5rem);
  --t-h2:    clamp(2.6rem, 6.2vw, 6rem);
  --t-h3:    clamp(1.9rem, 3.4vw, 3rem);
  --t-lede:  clamp(1.25rem, 1.9vw, 1.6rem);
  --t-body:  1rem;
  --t-small: .8125rem;
  --t-label: .6875rem;

  /* Space & layout */
  --gutter:  clamp(16px, 4.2vw, 64px);
  --maxw:    1440px;
  --section: clamp(88px, 13vw, 200px);
  --nav-h:   72px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur:      .6s;
}