/* Maison Hair — design tokens
   Concept: a Parisian atelier in late-afternoon light.
   Direction: Editorial Maison, bent with arches. Tenor Sans + Mulish. */

:root {
  /* Palette: travertine, walnut, brass */
  --ivory: #f8f4ee;
  --linen: #efe7dc;
  --travertine: #e3d6c4;
  --stone: #b9a893;
  --walnut: #3a2a20;
  --espresso: #1f1712;
  --ink: #2a211b;
  --ink-soft: #5e5046;
  --brass: #a8834f;
  --brass-soft: #c9a977;
  --white: #fffdf9;

  --bg: var(--ivory);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --line: rgba(58, 42, 32, 0.16);

  /* Type */
  --font-display: "Tenor Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Mulish", "Helvetica Neue", Arial, sans-serif;

  --fs-mega: clamp(3rem, 11vw, 10rem);
  --fs-h1: clamp(2.6rem, 6.4vw, 6rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.75rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.06rem, 1.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.74rem;

  --track-label: 0.26em;
  --track-tight: -0.015em;

  /* Space */
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 10vw, 136px);
  --max: 1320px;
  --measure: 60ch;

  /* Shape */
  --arch: 999px 999px 0 0;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --bar-h: 68px;
}

@media (max-width: 767px) {
  :root {
    --track-label: 0.2em;
    --fs-body: 1rem;
  }
}