/* ==========================================================================
   LumaSKIN Clinic - Design Tokens
   Identity: "Clinical Editorial" — Porcelain · Ink · Eucalyptus.
   A doctor-led Miami skin clinic. Editorial serif display, technical grotesque
   UI, a single confident green accent, architectural shapes, hairline depth.
   Every color, font, space, motion, radius, and shadow value lives here.
   ========================================================================== */

:root {
  /* ---- Colors ----
     Porcelain neutrals, a deep faintly-green ink, and one signature
     eucalyptus accent. (The accent historically lived in the --luma-gold*
     tokens; the names are kept so every existing reference re-skins cleanly.) */

  /* Neutrals — porcelain / greige */
  --luma-cream: #F1EEE7;
  --luma-cream-mid: #E6E1D6;
  --luma-sand: #D7D1C4;
  --luma-pearl: #FAF8F4;
  --luma-muted: #DCDBD2;       /* secondary text on DARK surfaces */
  --luma-white: #FFFFFF;

  /* Ink — deep, faintly green near-blacks (replaces the old warm espresso) */
  --luma-obsidian: #14160F;
  --luma-charcoal: #1F2419;
  --luma-umber: #3F5247;        /* eyebrows / quiet labels on light */
  --luma-mid: #56655B;          /* secondary body copy (green-gray) */
  /* Secondary text on LIGHT surfaces (meets WCAG AA ~5.4:1 on porcelain). */
  --luma-muted-ink: #56655B;

  /* Signature accent — Eucalyptus (kept under the --luma-gold* names) */
  --luma-gold: #4F8770;         /* primary accent: ticks, stat figures, marks */
  --luma-gold-light: #A7C3B6;   /* soft sage: accents on dark surfaces */
  --luma-gold-dark: #2E5645;    /* deep forest: links, primary hover, on-light */

  /* Warm clay counterpoint — used sparingly (form errors, rare warmth) */
  --luma-blush: #B5705A;

  --luma-border: rgba(31, 36, 25, 0.16);
  --luma-border-light: rgba(31, 36, 25, 0.07);

  /* ---- Typography ----
     Display: Instrument Serif (single weight, elegant at large sizes).
     UI/body: Hanken Grotesk (clean technical grotesque, great small + tabular).
     Logo:    Hanken Grotesk 800 set as a tracked wordmark. */
  --font-display: 'Instrument Serif', 'Georgia', serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-logo: 'Hanken Grotesk', system-ui, sans-serif;
  --font-weight-light: 400;     /* Instrument Serif has no light; 400 reads light */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Type Scale ---- */
  --text-hero: clamp(56px, 8.4vw, 132px);
  --text-display: clamp(42px, 6vw, 92px);
  --text-h2: clamp(30px, 4.2vw, 62px);
  --text-h3: clamp(22px, 2.6vw, 34px);
  --text-h4: clamp(17px, 1.8vw, 23px);
  --text-body-lg: clamp(16px, 1.2vw, 18px);
  --text-body: 15px;
  --text-small: 13px;
  --text-eyebrow: 11px;
  --text-eyebrow-spacing: 0.22em;

  /* ---- Spacing ---- */
  --space-section: clamp(84px, 10vw, 172px);
  --space-section-sm: clamp(48px, 6vw, 96px);
  --space-container: clamp(20px, 5vw, 80px);
  --space-gap: clamp(16px, 2vw, 32px);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --dur-reveal: 900ms;

  /* ---- Radii — architectural, low and intentional ---- */
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 9px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --radius-btn: 4px;            /* CTAs are squared, not pills */

  /* ---- Shadows — tinted with ink, soft and flat ---- */
  --shadow-card: 0 1px 2px rgba(20, 22, 15, 0.04), 0 10px 28px -14px rgba(20, 22, 15, 0.12);
  --shadow-card-hover: 0 2px 6px rgba(20, 22, 15, 0.06), 0 22px 48px -18px rgba(20, 22, 15, 0.20);
  --shadow-gold: 0 8px 30px -10px rgba(76, 124, 104, 0.30);

  /* ---- Placeholder tones ---- */
  --ph-light: #DED8CB;
  --ph-mid: #CCC5B4;
  --ph-dark: #14160F;
}