/**
 * Vanity or Vice — Layer 2: SEMANTIC
 * Product meaning / roles. Components should prefer these.
 * Also bridges legacy short names (--paper, --ink, --brass, …)
 * and --vovn-* aliases used across the theme.
 */

:root {
  /* —— Surfaces —— */
  --color-surface-page: var(--palette-porcelain);
  --color-surface-stone: var(--palette-stone);
  --color-surface-ink: var(--palette-ink);
  --color-surface-espresso: var(--palette-espresso);
  --color-surface-field: var(--palette-field);
  --color-border-rule: var(--palette-rule);
  --color-border-line: var(--line-ink-20);

  /* —— Text —— */
  --color-text-primary: var(--palette-ink);
  --color-text-quiet: var(--palette-quiet);
  --color-text-on-dark: var(--palette-porcelain);
  --color-text-on-dark-muted: rgba(247, 244, 238, 0.76);

  /* —— Status (verdicts) —— */
  --color-status-worth: var(--palette-oxblood);
  --color-status-stop: var(--palette-terracotta);
  --color-status-missing: var(--palette-charcoal);

  /* —— Accent —— */
  --color-accent-metal: var(--palette-gold);
  --color-accent-brand: var(--palette-oxblood);

  /* —— Supporting warm neutrals —— */
  --color-support-bronze: var(--palette-bronze);
  --color-support-putty: var(--palette-putty);
  --color-support-cocoa: var(--palette-cocoa);
  --color-support-warm-grey: var(--palette-warm-grey);

  /* —— Type roles —— */
  --font-display: var(--font-display-stack);
  --font-ui: var(--font-ui-stack);
  --font-mono: var(--font-mono-stack);

  /* —— Layout roles —— */
  --layout-shell: var(--shell-max);
  --elevation-editorial: var(--shadow-editorial);

  /* ==========================================================
     CLASSIC LUXURY HIERARCHY STRUCTURE (Vanity or Vice)
     Display: Bodoni Moda · Body/UI: Inter
     Prefer regular/medium + italic over bold for display serif.
     ========================================================== */
  --text-display: clamp(2.4rem, 5vw, 3.85rem);
  --tracking-display: -0.018em;
  --leading-display: 1.08;

  --text-title: clamp(2rem, 3.4vw, 3.15rem);
  --tracking-title: -0.016em;
  --leading-title: 1.12;

  --text-sub: clamp(1.45rem, 2.2vw, 2.15rem);
  --tracking-sub: -0.012em;
  --leading-sub: 1.22;

  --text-h3: clamp(1.2rem, 1.5vw, 1.55rem);
  --tracking-h3: -0.01em;
  --leading-h3: 1.3;

  --text-deck: clamp(1.1rem, 1.4vw, 1.35rem);
  --leading-deck: 1.4;

  --text-body: 1.0625rem;
  --leading-body: 1.75;
  --tracking-body: 0.012em;
  /* House contract: the prose column carries no cap of its own; the band it
     sits in does. See assets/tokens/hierarchy.css for the long version. */
	--measure-body: none;

  --text-utility: 0.72rem;
  --tracking-utility: 0.14em;
  --leading-utility: 1.35;

  --space-block: 1.75rem;

  /* ==========================================================
     LEGACY BRIDGES — keep existing component CSS working
     Prefer semantic names for all new work.
     ========================================================== */

  /* Short names used by vv-editorial-legacy.css */
  --paper: var(--color-surface-page);
  --ink: var(--color-text-primary);
  --plum: var(--color-surface-field);
  --accent: var(--color-status-worth);
  --slate: var(--color-status-missing);
  --stone: var(--color-surface-stone);
  --seaglass: var(--color-support-warm-grey);
  --rose: var(--color-status-stop);
  --brass: var(--color-accent-metal);
  --coral: var(--color-status-stop);
  --rule: var(--color-border-rule);
  --quiet: var(--color-text-quiet);
  --gold: var(--color-accent-metal);
  --display: var(--font-display);
  --body: var(--font-ui);
  --mono: var(--font-mono);

  /* --vovn-* names used by style.css consumers / older sheets */
  --vovn-porcelain: var(--color-surface-page);
  --vovn-paper: var(--color-surface-page);
  --vovn-stone: var(--color-surface-stone);
  --vovn-rule: var(--color-border-rule);
  --vovn-ink: var(--color-surface-ink);
  --vovn-espresso: var(--color-surface-espresso);
  --vovn-field: var(--color-surface-field);
  --vovn-text: var(--color-text-primary);
  --vovn-text-quiet: var(--color-text-quiet);
  --vovn-text-on-dark: var(--color-text-on-dark);
  --vovn-text-on-dark-muted: var(--color-text-on-dark-muted);
  --vovn-oxblood: var(--color-status-worth);
  --vovn-terracotta: var(--color-status-stop);
  --vovn-charcoal: var(--color-status-missing);
  --vovn-gold: var(--color-accent-metal);
  --vovn-champagne: var(--color-accent-metal);
  --vovn-bronze: var(--color-support-bronze);
  --vovn-putty: var(--color-support-putty);
  --vovn-cocoa: var(--color-support-cocoa);
  --vovn-line: var(--color-border-line);
  --vovn-display: var(--font-display);
  --vovn-ui: var(--font-ui);
  --vovn-mono: var(--font-mono);
  --vovn-shell: var(--layout-shell, 90vw);
  --vovn-shadow: var(--elevation-editorial);

  color-scheme: light;
}

/* On-dark context: rebind text/accent for nested children */
.vv-hero,
.vv-final,
.vv-split--dark,
.vv-footer,
[data-surface="ink"] {
  --color-text-primary: var(--color-text-on-dark);
  --color-text-quiet: var(--color-text-on-dark-muted);
}