/* ============================================================
   tokens.css — SkinMedics design tokens
   "MAISON" — luxury fashion-house language (Dior / Chanel / Gucci).
   Monochrome: near-black + ivory/cream + white. NO chromatic accent —
   contrast and imagery carry the drama. Full-bleed editorial imagery,
   tiny tracked uppercase labels, hairline rules, vast whitespace.
   Display: Playfair Display · Body/labels: Inter.
   Token NAMES are the contract.
   ============================================================ */

:root {
  /* --- Monochrome palette --- */
  --ink:        #14130F;   /* near-black — dominant */
  --ink-soft:   #6A655B;   /* warm grey secondary — 4.7:1 on --bg */
  --bg:         #F3F0E8;   /* warm ivory / cream (maison) */
  --surface:    #FBFAF5;   /* lifted panels */
  --tint:       #ECE7DC;   /* soft tint panel */
  --tint-deep:  #E4DDCF;   /* image/card placeholder ground (taupe-cream) */
  --line:       rgba(20,19,15,0.14);  /* hairline */
  --line-strong:rgba(20,19,15,0.30);

  /* Dark (full-bleed black sections / footer) */
  --dark:       #14130F;
  --on-dark:    #F3F0E8;
  --on-dark-soft: rgba(243,240,232,0.66);
  --line-on-dark: rgba(243,240,232,0.20);

  /* Accent = ink (monochrome). Links are ink, underlined. */
  --accent-ink: #14130F;

  /* Functional */
  --danger:  #9E2B23;
  --success: #2E5E40;
  --focus:   #14130F;

  /* --- Type --- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Fluid type scale — wider range for editorial drama */
  --step--2: clamp(0.69rem, 0.66rem + 0.12vw, 0.75rem);  /* tracked labels */
  --step--1: clamp(0.83rem, 0.8rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.7vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.7rem + 3vw, 4rem);
  --step-5:  clamp(2.9rem, 1.9rem + 5vw, 6rem);     /* display */
  --step-6:  clamp(3.4rem, 2rem + 7vw, 8rem);       /* hero / oversize */

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.65;
  --tracking-label: 0.24em;   /* maison tracked caps */
  --tracking-wide:  0.14em;
  --tracking-tight: -0.015em;

  /* --- Spacing (generous) --- */
  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-s: 0.75rem;
  --space-m: 1rem; --space-l: 1.5rem; --space-xl: 2.5rem;
  --space-2xl: 4.5rem; --space-3xl: 8rem; --space-4xl: 11rem;

  /* --- Layout --- */
  --measure: 60ch;
  --container: 1320px;
  --container-narrow: 920px;
  --radius: 0px;        /* maison = sharp corners, no rounding */
  --announce-h: 40px;   /* offer announcement bar height (JS sets 0 on dismiss) */

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 240ms; --dur-base: 500ms; --dur-slow: 1000ms;
  --lenis-disable-below: 1024px; /* legacy token; Lenis removed — native scroll */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}