/* ============================================================
   VIRTORUM — Design Tokens
   Editorial finance aesthetic. German/US investor positioning.
   Cormorant Garamond (serif italic) + DM Mono (technical).
   Refined palette: navy structural · Bordeaux action · warm paper.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* ---- SURFACES ---- */
  --v-paper:      #F7F3EC;  /* primary background — warm cream newsprint */
  --v-paper-alt:  #EDE8DF;  /* subtle section shift */
  --v-paper-deep: #E4DDCE;  /* deepest warm surface */
  --v-card:       #FFFFFF;  /* data cards / metric panels */

  /* ---- INK ---- */
  --v-ink:        #141210;  /* near-black, for dark sections */
  --v-ink-soft:   #1A1410;  /* body copy on light */
  --v-ink-sub:    #5C5247;  /* secondary copy */
  --v-ink-muted:  #9A8F84;  /* tertiary / labels / captions */
  --v-ink-faint:  #C4BDB0;  /* dividers inside cards */

  /* ---- BORDERS ---- */
  --v-border:       #D4CEBF;  /* default 1px rules */
  --v-border-soft:  #E2DCCD;
  --v-border-strong:#B8B09F;

  /* ---- NAVY (primary structural accent) ---- */
  --v-navy-900: #0F2340;  /* deepest — section blocks */
  --v-navy:     #1E3A5F;  /* PRIMARY — structural, data line B, nav underline */
  --v-navy-600: #34547A;
  --v-navy-400: #6B84A3;
  --v-navy-200: #B8C4D4;
  --v-navy-50:  #EBEFF5;

  /* ---- BORDEAUX (action + primary data line) ---- */
  /* Note: legacy `--v-claret-*` aliases retained for back-compat. */
  --v-bordeaux-900: #5E1720;
  --v-bordeaux:     #7A1F28;  /* PRIMARY accent — CTAs, US-data line */
  --v-bordeaux-lift:#A83640;  /* lifted tint for USE ON DARK (ink/navy bg) */
  --v-bordeaux-300: #C98A92;
  --v-bordeaux-50:  #F0E4E6;

  --v-claret-900: var(--v-bordeaux-900);
  --v-claret:     var(--v-bordeaux);
  --v-claret-600: var(--v-bordeaux-lift);
  --v-claret-300: var(--v-bordeaux-300);
  --v-claret-50:  var(--v-bordeaux-50);

  /* ---- BRASS (editorial highlight on dark sections) ---- */
  --v-brass-900: #7A6540;
  --v-brass:     #B89968;  /* gold-on-navy accent, editorial eyebrows */
  --v-brass-300: #D9C5A2;

  /* ---- SEMANTIC ---- */
  --v-success:  #3D6B4A;  /* earthy green — ROI positive, deltas up */
  --v-warning:  #9B6A1F;  /* amber ochre — caveats */
  --v-danger:   var(--v-claret);
  --v-info:     var(--v-navy);

  /* ---- LEGACY ALIASES (match reference homepage) ---- */
  --bg:      var(--v-paper);
  --bg-alt:  var(--v-paper-alt);
  --bg-card: var(--v-card);
  --text:    var(--v-ink-soft);
  --sub:     var(--v-ink-sub);
  --muted:   var(--v-ink-muted);
  --accent:  var(--v-claret);
  --ink:     var(--v-navy);
  --border:  var(--v-border);

  /* ---- TYPE FAMILIES ---- */
  --font-serif: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-mono:  'DM Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --font-body:  var(--font-mono);

  /* ---- TYPE SCALE (editorial, 8pt rhythm) ---- */
  --t-display:  64px;   /* hero italic serif */
  --t-h1:       52px;   /* section headline */
  --t-h2:       40px;   /* sub-section */
  --t-h3:       28px;   /* card title / macro */
  --t-h4:       22px;   /* step / problem titles */
  --t-h5:       18px;   /* panel titles */
  --t-lede:     14px;   /* lead paragraphs */
  --t-body:     13px;   /* body */
  --t-body-sm:  12px;   /* secondary body */
  --t-micro:    11px;   /* captions, legend */
  --t-label:    10px;   /* metadata */
  --t-eyebrow:   9px;   /* all-caps label */

  /* ---- LETTER-SPACING ---- */
  --ls-eyebrow:  3px;
  --ls-button:   1.5px;
  --ls-label:    2px;
  --ls-nav:      0.5px;

  /* ---- LINE-HEIGHTS ---- */
  --lh-tight:    1.06;   /* display serif */
  --lh-snug:     1.2;
  --lh-body:     1.8;    /* mono body is airy */
  --lh-read:     1.85;

  /* ---- SPACING (baseline 8px, with editorial half-steps) ---- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- RADIUS — minimal, editorial (no soft bubbles) ---- */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;   /* the one allowed radius for inputs/pills */

  /* ---- BORDER WIDTHS ---- */
  --bw-hair: 0.5px;
  --bw-1:    1px;
  --bw-2:    2px;

  /* ---- SHADOWS — reserved; Virtorum uses rules not shadows ---- */
  --shadow-none: none;
  --shadow-card: 0 1px 0 rgba(20,18,16,0.04), 0 0 0 1px var(--v-border);
  --shadow-float: 0 8px 32px -16px rgba(20,18,16,0.22), 0 2px 8px -4px rgba(20,18,16,0.08);

  /* ---- MOTION ---- */
  --ease:       cubic-bezier(.2,.6,.2,1);
  --dur-fast:   0.12s;
  --dur-med:    0.2s;
  --dur-slow:   0.4s;
}

/* ============================================================
   BASE RESET + BODY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  background: var(--v-paper);
  color: var(--v-ink-soft);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 100vw;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-mono); border: none; background: none; }
img, svg { display: block; max-width: 100%; }

/* ============================================================
   SEMANTIC TYPOGRAPHY — use these classes for consistency
   ============================================================ */

/* Eyebrow — tiny mono all-caps with a leading rule */
.v-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  line-height: 1;
}
.v-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--v-navy);
  flex-shrink: 0;
}
.v-eyebrow--brass::before { background: var(--v-brass); }
.v-eyebrow--claret::before { background: var(--v-claret); }

/* Display — hero headline, italic serif */
.v-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  color: var(--v-ink-soft);
  text-wrap: pretty;
  letter-spacing: -0.01em;
}
.v-display em { font-style: normal; color: var(--v-claret); }

/* H1 — section headline */
.v-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  color: var(--v-ink-soft);
  text-wrap: pretty;
}
.v-h1 em { font-style: normal; color: var(--v-claret); }

/* H2 */
.v-h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--v-ink-soft);
}
.v-h2 em { font-style: normal; color: var(--v-claret); }

/* H3 — card headline */
.v-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--v-ink-soft);
}

/* H4 */
.v-h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-h4);
  line-height: 1.25;
  color: var(--v-ink-soft);
}

/* H5 — panel title */
.v-h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-h5);
  line-height: 1.3;
  color: var(--v-ink-soft);
}

/* Lede — leading paragraph */
.v-lede {
  font-family: var(--font-mono);
  font-size: var(--t-lede);
  line-height: var(--lh-read);
  color: var(--v-ink-sub);
  font-weight: 300;
}

/* Body */
.v-body {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: var(--lh-read);
  color: var(--v-ink-sub);
}

/* Small body / caption */
.v-body-sm {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--v-ink-sub);
}

/* Micro — legend, deltas */
.v-micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--v-ink-muted);
}

/* Label — mono all-caps */
.v-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--v-ink-muted);
  font-weight: 400;
  line-height: 1;
}

/* Metric — large serif italic number */
.v-metric {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: var(--v-ink-soft);
  font-feature-settings: "lnum" 1;
}

/* Mono code / ticker */
.v-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--v-navy);
}

/* ============================================================
   INVERTED (dark-section) TOKENS
   Apply .on-dark to any container on --v-ink background.
   ============================================================ */
.on-dark { color: var(--v-paper); background: var(--v-ink); }
.on-dark .v-display,
.on-dark .v-h1,
.on-dark .v-h2,
.on-dark .v-h3,
.on-dark .v-h4,
.on-dark .v-h5 { color: var(--v-paper); }
.on-dark .v-display em,
.on-dark .v-h1 em,
.on-dark .v-h2 em { color: var(--v-brass); }
.on-dark .v-lede,
.on-dark .v-body,
.on-dark .v-body-sm { color: #8A8078; }
.on-dark .v-label,
.on-dark .v-micro { color: #8A8078; }
.on-dark .v-eyebrow { color: #8A8078; }
.on-dark .v-eyebrow::before { background: var(--v-brass); }