/* ============================================================
   WIZARD ADS — TYPOGRAPHY BIBLE  ·  the single source of truth
   ------------------------------------------------------------
   Loaded LAST so it wins over every module sheet and theme.css.
   ONE named type scale, ONE eyebrow spec, ONE gradient masthead
   treatment — tokenised so it re-tints correctly in BOTH
   palettes (Obsidian / Arctic) with no per-module overrides.

   THE LADDER (use the role, never a raw px):
     · t-hero      module marketing headline   (Modules bible only)
     · t-masthead  module / primary-surface ID  ← gradient, the hero title
     · t-section   in-page section heading
     · t-eyebrow   the kicker above a masthead   ← uppercase, tracked
     · t-panel     utility-pane / inspector title (solid, quiet)
     · t-sub       caption under a title
     · t-body      paragraph / running copy
     · t-label     uppercase field/metric label
     · t-cap       fine print / secondary caption
     · t-micro     smallest tag / count
     · t-num       tabular mono numerals
   ============================================================ */

:root{
  /* ---- families ---- */
  --font-ui:   'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- size scale — ONE ladder; modules reference these, never px ----
     Text steps (≤16px) collapse the old chaos (8/8.5/9/9.5 · 10/10.5/11 ·
     11.5/12 · 12.5/13 · 13.5/14) into defined rungs. Display + stat steps
     name the headline & dashboard-numeral sizes so they're systematic too. */
  --fs-hero:     clamp(30px, 4vw, 44px);     /* bible headline            */
  --fs-masthead: clamp(21px, 1.45vw, 25px);  /* every module identity     */
  --fs-section:  clamp(20px, 2.2vw, 26px);   /* in-page section heading   */

  --fs-stat-5:   38px;                        /* hero dashboard numeral    */
  --fs-stat-4:   34px;
  --fs-stat-3:   30px;
  --fs-stat-2:   26px;                        /* ← 26, 28                  */
  --fs-stat-1:   22px;                        /* ← 20, 21, 22, 23, 24      */

  --fs-xl:       19px;                        /* sub-heads ← 17, 18, 19    */
  --fs-lg:       16px;                        /* emphasis  ← 16            */
  --fs-panel:    15px;                        /* utility pane / inspector  */
  --fs-body:     14px;                        /* running copy ← 13.5, 14   */
  --fs-base:     13px;                        /* dense UI / rows ← 12.5,13 */
  --fs-sub:      12px;                        /* caption ← 11.5, 12        */
  --fs-label:    11px;                        /* uppercase label ← 10.5,11 */
  --fs-eyebrow:  10px;                        /* the kicker ← 10           */
  --fs-micro:    9px;                         /* tags/counts ← 8, 8.5, 9.5 */

  /* ---- weights ---- */
  --fw-norm:  400;
  --fw-reg:   500;
  --fw-med:   600;
  --fw-bold:  700;
  --fw-black: 800;

  /* ---- tracking ---- */
  --ls-tight:   -.03em;   /* mastheads / big numerals */
  --ls-snug:    -.02em;
  --ls-normal:  -.01em;   /* body */
  --ls-eyebrow:  .16em;   /* the ONE eyebrow tracking */
  --ls-label:    .06em;

  /* ---- line height ---- */
  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* ---- the gradient masthead treatment (OBSIDIAN baseline) ---- */
  --grad-head:      linear-gradient(118deg, #ffffff, #bfeef4 55%, #2ec7c2);
  --grad-head-glow: rgba(22,192,216,.28);
}

/* Arctic re-tints ONLY the gradient + glow — the geometry is shared */
html[data-theme="arctic"]{
  --grad-head:      linear-gradient(118deg, #0d7e93, #13b6cf 54%, #2ec7c2);
  --grad-head-glow: rgba(17,182,207,.20);
}

/* ============================================================
   ROLE CLASSES  +  retro-fit of every legacy header selector.
   The :is() lists below pull all the historically-divergent
   module classes onto the ONE canonical spec. Equal-specificity
   to theme.css's overrides, but loaded later, so this wins.
   ============================================================ */

/* ---- EYEBROW — one kicker spec everywhere ---- */
html[data-theme] :is(
  .t-eyebrow,
  .sx-hud-eyebrow, .sx-eyebrow,
  .mtx-eyebrow,
  .mod-eyebrow, .mod-hero .he-eyebrow,
  .vw-col-head .eyebrow, .vw-insp-head .h-eyebrow,
  .bp-eyebrow,
  .scr-eyebrow, .sm-eyebrow
){
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
/* the kicker's spark/glyph always rides the AI accent */
html[data-theme] :is(.t-eyebrow,.sx-eyebrow,.mod-eyebrow,.vw-col-head .eyebrow,.bp-eyebrow,.scr-eyebrow,.sm-eyebrow) .spark{
  color: var(--ai-b);
  filter: drop-shadow(0 0 6px var(--ai-b));
}

/* ---- MASTHEAD — the gradient module / primary-surface identity ---- */
html[data-theme] :is(
  .t-masthead,
  .sx-hud-title,
  .mtx-title,
  .mod-index-head h1,
  .vw-col-head h2,
  .bp-tools-head h2,
  .scr-title,
  .pane-title
){
  font-family: var(--font-ui);
  font-size: var(--fs-masthead);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px var(--grad-head-glow);
  margin: 0;
}

/* ---- HERO — the one oversized bible headline (same gradient) ---- */
html[data-theme] :is(.t-hero, .mod-hero h2){
  font-family: var(--font-ui);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  letter-spacing: -.035em;
  line-height: 1.02;
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px var(--grad-head-glow);
}

/* ---- SECTION heading (bible h3 + generic) ---- */
html[data-theme] :is(.t-section, .mod-stt h3){
  font-family: var(--font-ui);
  font-size: var(--fs-section);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
}

/* ---- SUB — the caption sitting under a masthead ---- */
html[data-theme] :is(
  .t-sub,
  .sx-hud-sub,
  .mtx-bar-sub,
  .scr-sub,
  .vw-col-head .cap,
  .bp-tools-head .cap,
  .mod-index-head .cap
){
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  font-weight: var(--fw-med);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

/* ---- PANEL title — quiet, solid utility-pane / inspector heading ---- */
html[data-theme] :is(
  .t-panel,
  .so-t,
  .vw-insp-head .h-t
){
  font-family: var(--font-ui);
  font-size: var(--fs-panel);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* ---- BODY copy ---- */
.t-body{
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-reg);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* ---- LABEL — uppercase field / metric label ---- */
.t-label{
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- CAP — fine secondary caption ---- */
.t-cap{
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  font-weight: var(--fw-med);
  color: var(--ink-3);
}

/* ---- MICRO — smallest tag / count ---- */
.t-micro{
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- NUM — tabular mono numerals ---- */
.t-num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   BIBLE demo (Modules · 00.07) — re-point the live type ladder
   swatches at the same tokens, so the doc shows the real system.
   ============================================================ */
html[data-theme] .mod-type-display{
  font-size: var(--fs-masthead);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px var(--grad-head-glow);
}
html[data-theme] .mod-type-h{ font-size: var(--fs-section); font-weight: var(--fw-black); letter-spacing: var(--ls-snug); color: var(--ink); }
html[data-theme] .mod-type-body{ font-size: var(--fs-body); font-weight: var(--fw-reg); color: var(--ink-2); }
html[data-theme] .mod-type-eyebrow{ font-size: var(--fs-eyebrow); font-weight: var(--fw-black); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
html[data-theme] .mod-type-mono{ font-family: var(--font-mono); font-size:var(--fs-base); font-weight: var(--fw-med); color: var(--ink-2); }

/* ============================================================
   IDENTITY-HEAD GEOMETRY  ·  the single source of truth
   ------------------------------------------------------------
   type roles (eyebrow / masthead / sub) are unified above, but
   each module still hand-rolled its OWN container padding and
   vertical rhythm — so the left-rail identity heads drifted
   apart (Library 18·18·14, Blueprint 16·16·12, Modules 20·20·16).
   Library — Media Library is the canon. These rules pull every
   left-rail identity head onto ONE box: same padding, same
   eyebrow→title→caption spacing, same divider.
   (Matrix / Stats use a horizontal glass command-bar header — a
   different surface type — and keep their own container, but
   their eyebrow→title rhythm is aligned to the same rungs.)
   ============================================================ */
html[data-theme] :is(
  .vw-col-head,
  .bp-tools-head,
  .mod-index-head
){
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
/* title sits one rung (9px) below the eyebrow, everywhere */
html[data-theme] :is(
  .vw-col-head h2,
  .bp-tools-head h2,
  .mod-index-head h1
){ margin: 9px 0 0; }
/* caption sits 3px under the title, everywhere */
html[data-theme] :is(
  .vw-col-head .cap,
  .bp-tools-head .cap,
  .mod-index-head .cap
){ margin-top: 3px; line-height: var(--lh-snug); }
/* the eyebrow kicker — identical gap + glyph rhythm on every head */
html[data-theme] :is(
  .vw-col-head .eyebrow,
  .bp-eyebrow,
  .mod-eyebrow,
  .scr-eyebrow
){ gap: 7px; }
/* stacked identity blocks (horizontal command bars) share the rung */
html[data-theme] :is(.mtx-id, .sx-hud-id, .scr-head-id){ gap: 4px; }

/* ============================================================
   PAGE BACKGROUND  ·  one calm backdrop for every tab
   ------------------------------------------------------------
   Library (.vw) and Blueprint (.bp) paint NO background of their
   own — they let the shared .app shell gradient show through, so
   they read calm and identical. Every other workspace stacked its
   OWN extra radial vignettes on top (.mod, .scr, .mtx, .stx),
   which is the left/right glow that made each tab look different.
   Strip them so all six tabs share the one .app backdrop.
   (Loaded last → wins over each module sheet AND the arctic theme.)
   ============================================================ */
html[data-theme] :is(.mod, .scr, .mtx, .stx){ background: transparent; }

/* ============================================================
   FLAT EDGES  ·  no more gray vignette bands
   ------------------------------------------------------------
   The global sidebar and every rail / inspector cast a big soft
   BLACK drop shadow (…60px -40px rgba(0,0,0,.9)). On the light
   Arctic theme that blurred black smears into the gray gradient
   bands running down the left and right of every page. A 1px
   border + a whisper of inset highlight is all the separation we
   need — drop the heavy shadow in both themes.
   ============================================================ */
html[data-theme] :is(.sidebar, .vw-col, .bp-tools, .mod-index){
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
}
html[data-theme] :is(.vw-insp, .bp-insp){
  box-shadow: inset 1px 0 0 rgba(255,255,255,.03);
}