/* IRMA'S BEAUTY SALON — design tokens
   The palette is read out of the approved film: warm stucco cream, the dark
   charcoal storefront, the gold of the lettering, the red of Irma's script,
   and the deep green of the banquette inside. Nothing here is a stock accent. */
:root {
  /* charcoal / near-black — warm, never blue-black */
  --ink: #100e0c;
  --ink-2: #17130f;
  --char: #201a15;
  --char-2: #2b231c;

  /* antique gold — the lettering */
  --gold: #c9a227;
  --gold-lit: #e6c876;
  --gold-deep: #8c6a1c;

  /* Irma's signature red — the script on the sign */
  --red: #c8202c;
  --red-lit: #e04a52;

  /* warm cream — the stucco and the daylight */
  --cream: #f3e9db;
  --cream-dim: #d9cbb8;
  --sand: #a8907a;

  /* deep salon green — the banquette */
  --green: #1f3b33;
  --green-lit: #2f5a4c;

  /* text on dark */
  --text: #f0e6d8;
  --text-soft: #c2b3a0;
  --text-mute: #9b8b78;

  --line: rgba(201, 162, 39, 0.22);
  --line-soft: rgba(240, 230, 216, 0.12);

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* type scale */
  --fs-display: clamp(2.5rem, 1rem + 6.2vw, 5.75rem);
  --fs-h2: clamp(1.95rem, 1.1rem + 3vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 0.97rem + 0.42vw, 1.32rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --track-eyebrow: 0.34em;
  --track-btn: 0.15em;

  --space-section: clamp(5.5rem, 3.5rem + 8vw, 10.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --content-max: 82rem;
  --measure: 38rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  --nav-h: 4.25rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Local fonts only — no external requests, no CDN dependency. */
@font-face {
  font-family: 'Playfair Display';
  src: url('../../assets/fonts/playfair-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../../assets/fonts/playfair-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}