/* =====================================================================
   Lustre · design tokens
   The salon chair as a website. Light is "Salon" (warm cream, espresso
   ink); dark is "After hours" (espresso with champagne light). --rose is
   the one accent (buttons, links, the lit phrase); the hair tokens colour
   the swatch fan and the stylists' chips; --gloss is the highlight that
   runs down a swatch.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f7f1ea;
  --card: #fffcf8;
  --well: #efe6dc;
  --line: #e0d4c6;
  --ink: #2a1d17;
  --ink-2: #4e3e35;
  --muted: #6e5d52;
  --rose: #9b3b2e;
  --rose-2: #7e2e23;
  --on-rose: #ffffff;
  --rose-soft: #f5e0d9;
  --champagne: #c79a62;
  --gloss: rgba(255, 255, 255, 0.55);
  --hair-1: #efe3c8;                  /* platinum */
  --hair-2: #d4ad6d;                  /* honey */
  --hair-3: #b5532b;                  /* copper */
  --hair-4: #7a4127;                  /* chestnut */
  --hair-5: #3a2418;                  /* espresso */
  --hair-6: #d99aa0;                  /* rose gold */
  --focus: #9b3b2e;
  --shadow-card: 0 1px 0 rgba(42, 29, 23, 0.05), 0 16px 34px -22px rgba(42, 29, 23, 0.5);
  --shadow-lift: 0 30px 60px -28px rgba(42, 29, 23, 0.55);

  --display: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(46px, 6.4vw, 96px);
  --fs-h2: clamp(34px, 4vw, 58px);
  --fs-h3: 22px;
  --fs-lead: clamp(18px, 1.35vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 11.5px;

  --wrap: 1220px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 6px;
  --r-m: 14px;
  --r-l: 26px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.8, 0.25, 1);
  --swish: cubic-bezier(0.5, 1.6, 0.4, 1);
  --d-fast: 160ms;
  --d: 340ms;
  --d-slow: 900ms;
}

/* ---------- After hours ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #17110e;
    --card: #211915;
    --well: #1c1512;
    --line: #3a2d26;
    --ink: #f6ece2;
    --ink-2: #dccbbd;
    --muted: #b09d8f;
    --rose: #f0a08f;
    --rose-2: #f6bdb0;
    --on-rose: #2c0d07;
    --rose-soft: #3d201a;
    --champagne: #e9c7a0;
    --gloss: rgba(255, 255, 255, 0.35);
    --focus: #f0a08f;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17110e;
  --card: #211915;
  --well: #1c1512;
  --line: #3a2d26;
  --ink: #f6ece2;
  --ink-2: #dccbbd;
  --muted: #b09d8f;
  --rose: #f0a08f;
  --rose-2: #f6bdb0;
  --on-rose: #2c0d07;
  --rose-soft: #3d201a;
  --champagne: #e9c7a0;
  --gloss: rgba(255, 255, 255, 0.35);
  --focus: #f0a08f;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}