/* Lumira Aesthetics — brand tokens (customization layer)
   Direction: CLINICAL-COOL. Deep slate ground, one cyan accent, grotesk-only type.
   Edit these values to rebrand the whole template.
   Loaded before the inline <style>, so every var() below wins. */
:root{
  /* ── Core palette — 5 surfaces + exactly 1 accent (R3) ───────
     The ground is a DEEP COOL SLATE. Nothing warm anywhere in this
     file: every neutral is mixed toward blue, never toward red. */
  --ground:#101A22;      /* page background — deep cool slate */
  --panel:#16222B;       /* raised surface: cards, alt bands  */
  --deep:#0B1219;        /* recessed surface: stats, footer   */
  --line:#26343F;        /* hairline rules, borders, image beds */
  --cyan:#4EC3E0;        /* THE accent — CTAs, figures, hover (8.56:1 on ground) */

  --ink:#E8EFF4;         /* primary text on slate (15.2:1)    */
  --muted:#9FB3C0;       /* AA-safe secondary text (8.1:1)    */

  /* Inverted pocket — the one pale panel (practitioners band). */
  --pale:#E8EFF4;        /* cool near-white surface           */
  --pale-ink:#101A22;    /* text on --pale (15.2:1)           */
  --pale-muted:#41535F;  /* muted text on --pale (6.9:1)      */
  --pale-line:#C4D2DB;   /* hairlines on --pale               */
  --pale-cyan:#0E5C74;   /* accent darkened for AA on --pale (6.5:1) */

  /* ── Type stacks (R2: 2 grotesk families + mono) ──────────── */
  --ff-display:"Schibsted Grotesk", system-ui, sans-serif;
  --ff-body:"Hanken Grotesk", system-ui, sans-serif;
  --ff-mono:"Azeret Mono", ui-monospace, monospace;

  /* ── Modular scale (R5) ──────────────────────────────────── */
  --t-hero:clamp(2.9rem, 7.4vw, 5.5rem);   /* 1.90× floor-to-cap spread */
  --t-h2:clamp(2.1rem, 4.4vw, 3.5rem);
  --t-h3:1.5rem;
  --t-lead:1.375rem;                       /* the single 22px lead */
  --t-body:1.0625rem;                      /* 17px */
  --t-sm:.9375rem;
  --t-mono:.75rem;                         /* 12px mono labels */
  --t-num:clamp(2.5rem, 8vw, 6rem);        /* R9 oversized numerals */

  /* ── Layout ──────────────────────────────────────────────── */
  --gut:60px;                              /* stepped gutter */
  --maxw:1280px;
  --r:2px;                                 /* R4 system (a): near-sharp instrument edge */
  --r-pill:999px;                          /* pills on nav + chips only */
  --sec:clamp(6rem, 14vw, 12rem);          /* R6 luxury section padding */
  --ease:cubic-bezier(.16, 1, .3, 1);      /* R16 — never `ease` */
}
@media (max-width:1024px){ :root{ --gut:28px; } }
@media (max-width:600px){ :root{ --gut:18px; } }
@media (max-width:360px){ :root{ --gut:14px; } }