/* Mirror of the VESS v2.3 SOT: ~/Vienovo Design System/vess_v2_3_tokens.css (2026-05-01).
 * Update the SOT first, then re-copy here - never edit hexes in this file. */
/* ============================================================================
 * VESS v2.3 (Tropical) — Vienovo Executive Scale System
 * Single source of truth for all Vienovo HTML reports, dashboards, web apps.
 *
 * Usage:
 *   <link rel="stylesheet" href="../Vienovo Design System/vess_v2_3_tokens.css">
 *   then reference variables: color: var(--vno-ink); etc.
 *
 * Bible: Vienovo Design System/VESS_v2.3_DESIGN_BIBLE.html (canonical)
 * Last updated: 2026-05-01
 * ========================================================================== */

:root {
  /* ---------- Brand navy palette ---------- */
  --vno-navy-ink:   #002A3A;  /* Deepest navy — hero overlays, footer bands */
  --vno-navy-deep:  #003E52;  /* Section openers, dark panels */
  --vno-navy:       #00546C;  /* Headers, primary navy chrome */
  --vno-navy-soft:  #006A86;  /* Secondary navy */
  --vno-brand-blue: #004D71;  /* Brand-mark blue from logo */

  /* ---------- Teal accents ---------- */
  --vno-teal-deep:  #0090C4;
  --vno-teal:       #00A8CC;
  --vno-teal-soft:  #E8F1F8;

  /* ---------- Sky (cover gradients) ---------- */
  --vno-sky:        #BFE2F2;
  --vno-sky-deep:   #4FB3D9;
  --vno-sky-soft:   #EAF5FB;
  --vno-sand:       #FFF4DC;

  /* ---------- Status / pillar colors ---------- */
  --vno-green-deep: #7BB52E;
  --vno-green:      #90CC3C;  /* achievement / forward-looking — accent rule color */
  --vno-green-soft: #EBF7E0;
  --vno-gold:       #FFC72C;  /* warning / mixed — accent rule color */
  --vno-gold-soft:  #FFF6DA;
  --vno-red:        #E53935;  /* alert / risk — accent rule color */
  --vno-red-soft:   #FBE7E2;

  /* ---------- Surface ---------- */
  --vno-paper:      #FFFFFF;
  --vno-bg:         #F5F7F9;
  --vno-line:       #E1E6EA;
  --vno-line-soft:  #ECF0F3;
  --paper-warm:     #FAF7F1;
  --paper-cool:     #F8FAFC;

  /* ---------- Ink (text) ---------- */
  --vno-ink:        #1A1A1A;  /* slide / report titles */
  --vno-slate:      #3D4A52;  /* lede / body */
  --vno-soft:       #6B7790;  /* eyebrow / caption */
  --vno-mute:       #8B97A8;  /* footer secondary, supporting text */
  --ink-warm:       #1F1A12;
  --vno-dark-text:  #D6DCE5;
  --vno-dark-mute:  #8B97A8;

  /* ---------- Gradients ---------- */
  --vno-horizon:  linear-gradient(180deg, #BFE2F2 0%, #6FBFE0 25%, #00A8CC 55%, #00546C 100%);
  --vno-tropical: linear-gradient(160deg, #BFE2F2 0%, #6FBFE0 22%, #00A8CC 50%, #00546C 78%, #003E52 100%);
  --vno-sunrise:  linear-gradient(160deg, #FFF4DC 0%, #FFE49E 18%, #FFC72C 35%, #6FBFE0 60%, #00546C 100%);

  /* ---------- Rules on dark surfaces ---------- */
  --rule-on-dark:        rgba(255, 255, 255, 0.10);
  --rule-on-dark-strong: rgba(255, 255, 255, 0.18);

  /* ---------- Shadow scale ---------- */
  --shadow-card: 0 1px 2px rgba(0, 42, 58, 0.04), 0 8px 24px rgba(0, 42, 58, 0.06);
  --shadow-lift: 0 18px 56px rgba(0, 42, 58, 0.16), 0 4px 12px rgba(0, 42, 58, 0.08);
  --shadow-deep: 0 32px 96px rgba(0, 42, 58, 0.28);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --font-display: "Playfair Display", "Inter", serif;  /* italic editorial accents only */

  /* ---------- Type scale (px @ 1080 canvas; scale to viewport in deliverables) ---------- */
  --type-eyebrow:  12px;  /* 600 weight, 0.16em tracking, vno-soft */
  --type-body-sm:  13px;
  --type-body:     16px;
  --type-lede:     24px;  /* 300 weight, vno-slate */
  --type-title:    32px;  /* 700 weight, -0.25 tracking, vno-ink */
  --type-display:  56px;  /* hero / cover */
  --type-hero:     72px;  /* hero stat / closing */

  /* ---------- Spacing scale (8px base) ---------- */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-10:  40px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-40: 160px;

  /* ---------- Radius scale ---------- */
  --r-0:    0;     /* tables, charts */
  --r-1:    4px;   /* chips */
  --r-2:    6px;   /* cards / tiles (default) */
  --r-3:   12px;   /* large panels */
  --r-pill: 999px;

  /* ---------- Layout ---------- */
  --canvas-w:         1920px;
  --canvas-h:         1080px;
  --outer-margin:       96px;
  --outer-margin-hero: 160px;
  --grid-cols:           12;
  --grid-gutter:        24px;

  /* ---------- Easing ---------- */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ============================================================================
 * Reusable chrome classes — apply to analytical report layouts
 * ========================================================================== */

.vess-eyebrow {
  font: 600 var(--type-eyebrow)/1 var(--font-sans);
  color: var(--vno-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vess-title {
  font: 700 var(--type-title)/1.15 var(--font-sans);
  color: var(--vno-ink);
  letter-spacing: -0.01em;
  margin: 8px 0 12px;
}

.vess-lede {
  font: 300 var(--type-lede)/1.4 var(--font-sans);
  color: var(--vno-slate);
}

.vess-accent-rule {
  display: block;
  width: 32px;
  height: 2px;
  border: 0;
  background: var(--vno-green);  /* default tone — override per slide */
  margin: 16px 0 24px;
}
.vess-accent-rule--green { background: var(--vno-green); }
.vess-accent-rule--gold  { background: var(--vno-gold); }
.vess-accent-rule--navy  { background: var(--vno-navy-deep); }
.vess-accent-rule--red   { background: var(--vno-red); }

.vess-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--vno-line);
  color: var(--vno-mute);
  font: 400 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
}
.vess-footer .wordmark { height: 24px; }
.vess-footer .source   { font-style: normal; }
.vess-footer .pageno   { font-variant-numeric: tabular-nums; }