/* Hallmark · tokens · High Maintenance Luxury Salon
 * theme: custom (tuned) · vibe: "espresso, bone, gallery light, whisper of rose"
 * axes: light / geometric-sans / chromatic-other (dusty-rose ~18°)
 * Every colour and font in site.css references a token from this file.
 */

:root {
  /* ---- Paper: warm bone, tinted toward the espresso anchor ---- */
  --color-paper:          oklch(97.7% 0.006 75);   /* rgb(250 247 243) */
  --color-paper-2:        oklch(95.4% 0.008 74);   /* the photographic plate band */
  --color-paper-3:        oklch(92.4% 0.011 77);   /* deepest greige panel        */
  --color-blush:          oklch(95.5% 0.012 25);   /* the one rose-tinted surface */

  /* ---- Ink ---- */
  --color-ink:            oklch(21.3% 0.009 59);   /* 16.5:1 on paper */
  --color-ink-2:          oklch(41.9% 0.018 64);   /*  7.9:1 on paper */
  --color-muted:          oklch(50.5% 0.018 64);   /*  5.5:1 on paper */

  /* ---- Espresso: the dark band, lifted from the stylists' photograph ---- */
  --color-espresso:       oklch(31%   0.030 49);
  --color-espresso-2:     oklch(39%   0.034 52);
  --color-on-espresso:    oklch(93%   0.010 70);   /* 10.8:1 on espresso */
  --color-on-espresso-2:  oklch(74%   0.016 65);   /*  5.7:1 on espresso */

  /* ---- Rules ---- */
  --color-rule:           oklch(88.8% 0.014 74);
  --color-rule-2:         oklch(93.6% 0.011 77);
  --color-rule-inv:       oklch(42%   0.024 52);

  /* ---- Accent: dusty rose, held under 3% of any viewport ---- */
  --color-accent:         oklch(64%   0.120 18);
  --color-accent-soft:    oklch(80%   0.060 20);
  --color-focus:          oklch(58%   0.170 18);   /* 4.4:1 on paper    */
  --color-focus-inv:      oklch(80%   0.060 20);   /* 6.9:1 on espresso */

  /* ---- Type ---- */
  --font-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "EB Garamond", Iowan Old Style, Palatino, Georgia, serif;

  --text-xs:        0.6875rem;
  --text-sm:        0.8125rem;
  --text-base:      1.0625rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-display-s: clamp(2.25rem, 5vw + 0.5rem, 3.75rem);
  --text-display:   clamp(2.25rem, 8.4vw, 6.75rem);

  --track-display: 0.015em;
  --track-tight:  -0.012em;
  --track-label:   0.16em;
  --track-nav:     0.09em;

  /* ---- Space: 4pt scale ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure:     62ch;

  /* Width of the centred hero photograph (1440 × 1295, cropped to just above the
   * tallest head). Sized so all seven clear the fold on a 1280 × 800 laptop. */
  --plate-w: 62rem;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  480ms;

  /* ---- Touch ---- */
  --tap-min: 44px;

  /* ---- Rules & radii ---- */
  --rule-hair:  1px;
  --rule-thick: 2px;
  --radius-none: 0;
  --radius-sm:   2px;

  /* ---- Elevation ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}