/* ============================================================
   ROMANOS VALEONTIS — SHARED DESIGN SYSTEM
   Loaded AFTER each page's own <style> block.
   Overrides palette + typography only; leaves layout geometry intact.
   ============================================================ */

/* ---------- 1. TOKEN OVERRIDE ----------------------------------
   Every case study defines its own :root palette under different
   variable names. We redefine all of them to the same values so
   existing rules inherit the new system automatically.
---------------------------------------------------------------- */
:root {
  /* -- canonical palette -- */
  --rv-text:        #14161a;   /* near-black body text            */
  --rv-text-2:   #3d434d;   /* secondary text                  */
  --rv-text-3:   #6b7280;   /* captions, labels                */
  --rv-text-4:  #9aa1ac;   /* dividers, meta                  */
  --rv-bg:      #ffffff;   /* page background                 */
  --rv-bg-2:  #fafaf9;   /* subtle band                     */
  --rv-bg-3: #f4f5f6;   /* table stripes, cards            */
  --rv-line:       #e5e7eb;   /* hairlines                       */
  --rv-line-2:  #f0f1f3;
  --rv-accent:     #1c3f60;   /* restrained ink-blue             */
  --rv-accent-2:  #2f5c84;
  --rv-accent-wash:#eef2f6;

  /* semantic (kept muted, not candy) */
  --rv-up:         #1f6b45;
  --rv-up-wash:    #eef5f1;
  --rv-down:       #9b2c2c;
  --rv-down-wash:  #f9eeee;
  --rv-warn:       #8a6116;
  --rv-warn-wash:  #f8f3e8;

  /* -- typography -- */
  --rv-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --rv-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rv-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- alias every legacy variable to the new system ---- */
  --navy: var(--rv-accent);        --navy-mid: var(--rv-accent-2);
  --midnight: var(--rv-bg);     --deep: var(--rv-bg);
  --steel: var(--rv-accent-2);
  --gold: var(--rv-accent);        --gold-lt: var(--rv-accent-2);
  --gold-dim: var(--rv-accent-wash);
  --gold-glow: transparent;
  --amber: var(--rv-warn);         --amber-soft: var(--rv-warn-wash);
  --amb-dim: var(--rv-warn-wash);
  --cream: var(--rv-bg);        --warm-white: var(--rv-bg);
  --white: var(--rv-text);          /* legacy dark themes used --white for TEXT */
  --muted: var(--rv-text-3);
  --border: var(--rv-line);        --border-lt: var(--rv-line-2);
  --grey-100: var(--rv-bg-3);--grey-200: var(--rv-line);
  --grey-400: var(--rv-text-4); --grey-700: var(--rv-text-2);
  --red: var(--rv-down);           --red-soft: var(--rv-down-wash);
  --red-dim: var(--rv-down-wash);
  --green: var(--rv-up);           --green-soft: var(--rv-up-wash);
  --buy: var(--rv-up);             --buy-dim: var(--rv-up-wash);
  --font-disp: var(--rv-serif);
  --font-cond: var(--rv-sans);
  --max: 780px;                 --max-w: 780px;
  --pad: clamp(20px, 5vw, 48px);
  --side-pad: clamp(20px, 5vw, 48px);
}

/* ---- force legacy variables onto the new system ---------------- */
:root {
  --navy: var(--rv-accent);        --navy-mid: var(--rv-accent-2);
  --midnight: var(--rv-bg);        --deep: var(--rv-bg);
  --steel: var(--rv-accent-2);
  --gold: var(--rv-accent);        --gold-lt: var(--rv-accent-2);
  --gold-dim: var(--rv-accent-wash); --gold-glow: transparent;
  --amber: var(--rv-warn);         --amber-soft: var(--rv-warn-wash);
  --amb-dim: var(--rv-warn-wash);  --amber-lt: var(--rv-warn-wash);
  --cream: var(--rv-bg);           --warm-white: var(--rv-bg);
  --white: var(--rv-text);
  --muted: var(--rv-text-3);
  --border: var(--rv-line);        --border-lt: var(--rv-line-2);
  --grey-100: var(--rv-bg-3);      --grey-200: var(--rv-line);
  --grey-400: var(--rv-text-4);    --grey-700: var(--rv-text-2);
  --red: var(--rv-down);           --red-soft: var(--rv-down-wash);
  --red-dim: var(--rv-down-wash);  --red-lt: var(--rv-down-wash);
  --green: var(--rv-up);           --green-soft: var(--rv-up-wash);
  --green-lt: var(--rv-up-wash);
  --buy: var(--rv-up);             --buy-dim: var(--rv-up-wash);
  /* collision cases: legacy themes used these as DARK BACKGROUNDS */
  --ink: var(--rv-bg);   --ink-2: var(--rv-bg-2);  --ink-3: var(--rv-bg-3);
  --smoke: var(--rv-text); --bone: var(--rv-text);
  --font-disp: var(--rv-serif);  --font-cond: var(--rv-sans);
  --font-display: var(--rv-serif); --font-body: var(--rv-sans); --font-mono: var(--rv-mono);
  --max: 780px; --max-w: 780px;
  --pad: clamp(20px,5vw,48px); --side-pad: clamp(20px,5vw,48px);
}

/* hard guarantee: no dark hero panels survive */
.hero, .hero-bg, .hero-bkg, .hero-inner, header.hero,
section, main, body, .cta-section {
  background-image: none !important;
}
.hero, .hero-bg, .hero-bkg { background-color: var(--rv-bg) !important; }
.hero-title, .hero-title em, .hero-title .strike, .hero-eyebrow, .hero-sub {
  color: var(--rv-text) !important; -webkit-text-fill-color: var(--rv-text) !important;
  opacity: 1 !important;
}
.hero-title em { color: var(--rv-accent) !important; -webkit-text-fill-color: var(--rv-accent) !important; font-style: italic; }
.hero-title .strike { text-decoration: line-through; color: var(--rv-text-4) !important; -webkit-text-fill-color: var(--rv-text-4) !important; }
.hero-sub { color: var(--rv-text-2) !important; -webkit-text-fill-color: var(--rv-text-2) !important; }


/* ---------- 2. FOUNDATION -------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--rv-bg) !important;
  color: var(--rv-text) !important;
  font-family: var(--rv-sans) !important;
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* kill decorative background layers from dark themes */
body::before, body::after,
.hero-bkg, .hero::before, .hero::after,
.grain, .noise, .vignette, .glow { display: none !important; }

p, li { color: var(--rv-text-2); }
strong, b { color: var(--rv-text); font-weight: 600; }
em, i { font-style: italic; }
a { color: var(--rv-accent); text-decoration: none; }
a:hover { color: var(--rv-accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 3. TYPOGRAPHY -------------------------------------- */
h1, h2, h3, h4,
.hero-title, .hero-deck, .sec-title, .cat-title, .sc-name {
  font-family: var(--rv-serif) !important;
  color: var(--rv-text) !important;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.22;
  text-transform: none !important;
}

h1, .hero-title { font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(23px, 3.4vw, 31px); margin-top: 2.6em; margin-bottom: 0.7em; }
h3 { font-size: clamp(18px, 2.4vw, 21px); margin-top: 2em; margin-bottom: 0.5em; font-weight: 600; }

/* eyebrow / section markers */
.sec-tag, .section-number, .sec-num, .hero-tag, .nav-brand,
.meta-label, .meta-lbl, .stat-label, .stat-lbl, .lbl,
.hero-meta-label, .pipe-stat-label, .bridge-label, .tk-num, .cat-num,
.dd-pill, .rec-pill-label, .footer-brand, .table-note, .bridge-tag {
  font-family: var(--rv-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--rv-text-3) !important;
  font-weight: 500 !important;
  background: none !important;
  -webkit-text-fill-color: var(--rv-text-3) !important;
}

.sec-tag, .section-number, .sec-num { color: var(--rv-accent) !important; -webkit-text-fill-color: var(--rv-accent) !important; }

/* numerals */
.num, .mono, .stat-value, .stat-num, .meta-value, .meta-val,
.sc-val, .bridge-num, .bridge-val, .pipe-stat-val, .hero-meta-val,
.rec-pill-val, .tl-date {
  font-family: var(--rv-mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--rv-text) !important;
  -webkit-text-fill-color: var(--rv-text) !important;
}

.stat-value, .stat-num, .pipe-stat-val, .hero-meta-val {
  font-size: clamp(20px, 3vw, 27px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* semantic colours — muted, never neon */
.pos, .up, .green, .buy { color: var(--rv-up) !important; -webkit-text-fill-color: var(--rv-up) !important; }
.neg, .down, .red, .low { color: var(--rv-down) !important; -webkit-text-fill-color: var(--rv-down) !important; }
.amber, .warn, .high, .neutral { color: var(--rv-warn) !important; -webkit-text-fill-color: var(--rv-warn) !important; }
.gold, .highlight { color: var(--rv-accent) !important; -webkit-text-fill-color: var(--rv-accent) !important; background: none !important; }

/* ---------- 4. NAVIGATION -------------------------------------- */
nav {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rv-line) !important;
  box-shadow: none !important;
  padding: 0 clamp(20px, 5vw, 48px) !important;
}
nav .nav-brand {
  color: var(--rv-text) !important;
  -webkit-text-fill-color: var(--rv-text) !important;
  font-family: var(--rv-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
nav .nav-links a, nav a {
  color: var(--rv-text-3) !important;
  -webkit-text-fill-color: var(--rv-text-3) !important;
  font-family: var(--rv-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  font-weight: 450 !important;
  border: none !important;
}
nav .nav-links a:hover, nav a:hover { color: var(--rv-accent) !important; -webkit-text-fill-color: var(--rv-accent) !important; }

/* progress bar */
#progress-bar, .progress-bar {
  background: var(--rv-accent) !important;
  height: 2px !important;
  box-shadow: none !important;
}

/* ---------- 5. HERO -------------------------------------------- */
.hero {
  background: var(--rv-bg) !important;
  border-bottom: 1px solid var(--rv-line);
  padding-top: clamp(90px, 14vw, 140px) !important;
  padding-bottom: clamp(40px, 7vw, 70px) !important;
}
.hero-inner { max-width: var(--max-w); }
.hero-subtitle, .hero-deck {
  color: var(--rv-text-2) !important;
  -webkit-text-fill-color: var(--rv-text-2) !important;
  font-family: var(--rv-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(17px, 2.2vw, 20px) !important;
  font-style: italic;
  line-height: 1.5 !important;
}
.hero-rule, .gold-rule {
  background: var(--rv-line) !important;
  height: 1px !important;
  box-shadow: none !important;
}

/* meta grid under hero */
.hero-meta, .meta-item, .hero-meta-item {
  border-color: var(--rv-line) !important;
  background: none !important;
}

/* ---------- 6. STATS BAR --------------------------------------- */
.stats-bar, .stats-grid, .pipe-stats {
  background: var(--rv-bg-2) !important;
  border-top: 1px solid var(--rv-line) !important;
  border-bottom: 1px solid var(--rv-line) !important;
  box-shadow: none !important;
}
.stat-item, .stat-divider { border-color: var(--rv-line) !important; background: none !important; }
.stat-divider { background: var(--rv-line) !important; }

/* ---------- 7. SECTIONS + CONTENT ------------------------------ */
section { background: var(--rv-bg) !important; }
.section-inner, .content-wrap { max-width: var(--max-w) !important; }

/* pull quotes */
.pull, .pull-quote, .one-thing, .ot-quote {
  font-family: var(--rv-serif) !important;
  font-style: italic;
  color: var(--rv-text) !important;
  -webkit-text-fill-color: var(--rv-text) !important;
  background: none !important;
  border-left: 2px solid var(--rv-accent) !important;
  border-top: none !important; border-right: none !important; border-bottom: none !important;
  padding-left: 22px !important;
  font-size: clamp(18px, 2.4vw, 21px) !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* cards of every flavour */
.insight-card, .cat-card, .sc-card, .pipe-card, .dd-item, .tk-item,
.risk-item, .bridge-item, .tl-item, .takeaways {
  background: var(--rv-bg-2) !important;
  border: 1px solid var(--rv-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: var(--rv-text-2) !important;
}
.insight-card *, .cat-card *, .sc-card *, .pipe-card *, .tk-item * { text-shadow: none !important; }

/* accent bars inside cards */
.dd-item.green, .dd-dot.green, .bridge-bar { background: var(--rv-up-wash) !important; }
.dd-item.red,   .dd-dot.red   { background: var(--rv-down-wash) !important; }
.dd-item.amber, .dd-dot.amber { background: var(--rv-warn-wash) !important; }

/* ---------- 8. TABLES (critical — must stay legible) ----------- */
.table-wrap { border: 1px solid var(--rv-line) !important; border-radius: 3px !important; overflow-x: auto; box-shadow: none !important; }
table { width: 100%; border-collapse: collapse !important; background: var(--rv-bg) !important; font-size: 14.5px !important; }
thead, thead tr, .tbl-navy, th {
  background: var(--rv-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
th {
  font-family: var(--rv-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 11px 13px !important;
  text-align: left;
  border: none !important;
}
td {
  padding: 10px 13px !important;
  border-top: 1px solid var(--rv-line-2) !important;
  border-left: none !important; border-right: none !important; border-bottom: none !important;
  color: var(--rv-text-2) !important;
  background: transparent !important;
}
tbody tr:nth-child(even) td { background: var(--rv-bg-2) !important; }
tbody tr:hover td { background: var(--rv-accent-wash) !important; }
td.num, td .num, .num td { font-family: var(--rv-mono) !important; font-variant-numeric: tabular-nums; text-align: right; color: var(--rv-text) !important; }
.tbl-bold td, tr.tbl-bold td { font-weight: 600 !important; color: var(--rv-text) !important; border-top: 1.5px solid var(--rv-text-4) !important; }
.tbl-footer td, tfoot td { background: var(--rv-bg-3) !important; font-weight: 600 !important; color: var(--rv-text) !important; }
.table-note { margin-top: 8px !important; display: block; }

/* ---------- 9. BUTTONS ----------------------------------------- */
.btn, .btn-primary, .btn-secondary {
  font-family: var(--rv-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 12px 22px !important;
  box-shadow: none !important;
  transition: all 0.18s ease !important;
  font-weight: 500 !important;
}
.btn-primary {
  background: var(--rv-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid var(--rv-accent) !important;
}
.btn-primary:hover { background: var(--rv-accent-2) !important; border-color: var(--rv-accent-2) !important; text-decoration: none !important; }
.btn-secondary {
  background: transparent !important;
  color: var(--rv-text) !important;
  -webkit-text-fill-color: var(--rv-text) !important;
  border: 1px solid var(--rv-line) !important;
}
.btn-secondary:hover { border-color: var(--rv-text-4) !important; background: var(--rv-bg-2) !important; text-decoration: none !important; }

/* ---------- 10. CTA + FOOTER ----------------------------------- */
.cta-section, .cta-inner {
  background: var(--rv-bg-2) !important;
  border-top: 1px solid var(--rv-line) !important;
  box-shadow: none !important;
}
footer {
  background: var(--rv-bg) !important;
  border-top: 1px solid var(--rv-line) !important;
  color: var(--rv-text-3) !important;
  padding: 44px clamp(20px,5vw,48px) !important;
}
.footer-brand { color: var(--rv-text) !important; -webkit-text-fill-color: var(--rv-text) !important; }
.footer-note, .footer-disc {
  color: var(--rv-text-4) !important;
  -webkit-text-fill-color: var(--rv-text-4) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  max-width: 640px;
}

/* ---------- 11. MOTION ----------------------------------------- */
.reveal { transition: opacity .5s ease, transform .5s ease !important; }
.fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 12. PRINT ------------------------------------------ */
@media print {
  nav, .cta-section, #progress-bar { display: none !important; }
  body { font-size: 11pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 13. PAGE-SPECIFIC LEGACY CLEANUP -------------------
   Neutralise decorative elements inherited from the old themes.
---------------------------------------------------------------- */

/* decorative radar / orbit graphics (Renk) */
.hero-radar, .radar-ring, .hero-grid { display: none !important; }

/* scrolling ticker strip — too "trading terminal" for this system */
.ticker { display: none !important; }

/* washed-out or gradient headline fragments */
.hero-title .question, .hero-title .answer,
.hero-title span, h1 span {
  color: var(--rv-text) !important;
  -webkit-text-fill-color: var(--rv-text) !important;
  background: none !important;
  opacity: 1 !important;
}
.hero-title .question { font-style: italic; color: var(--rv-accent) !important; -webkit-text-fill-color: var(--rv-accent) !important; }

/* nav brand is normalised in markup; style only */

/* neutralise inline-styled back links from legacy themes */
nav a[href="/"] {
  color: var(--rv-text-3) !important;
  -webkit-text-fill-color: var(--rv-text-3) !important;
  opacity: 1 !important;
  font-family: var(--rv-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
nav a[href="/"]:hover { color: var(--rv-accent) !important; -webkit-text-fill-color: var(--rv-accent) !important; }

/* scroll cue */
.scroll-cue, .scroll-hint { color: var(--rv-text-4) !important; -webkit-text-fill-color: var(--rv-text-4) !important; }

/* any leftover dark panels */
[class*="dark"], [class*="midnight"] { background: var(--rv-bg-2) !important; color: var(--rv-text-2) !important; }

/* ---------- 14. RESIDUAL DARK PANELS ---------------------------
   Legacy strips/cards with hard-coded dark backgrounds.
---------------------------------------------------------------- */
.data-strip, .stat-strip, .metrics-strip, .band, body.cs .card, .kpi-strip {
  background: var(--rv-bg-2) !important;
  background-image: none !important;
  border-top: 1px solid var(--rv-line) !important;
  border-bottom: 1px solid var(--rv-line) !important;
  color: var(--rv-text-2) !important;
}
.data-strip *, .stat-strip *, .metrics-strip *, body.cs .card *, .kpi-strip * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
.data-strip .num, .stat-strip .num, body.cs .card .num,
.data-strip [class*="val"], .stat-strip [class*="val"], body.cs .card [class*="val"],
.data-strip [class*="num"], .stat-strip [class*="num"], body.cs .card [class*="num"] {
  color: var(--rv-text) !important; -webkit-text-fill-color: var(--rv-text) !important;
}
.data-strip [class*="lab"], .stat-strip [class*="lab"], body.cs .card [class*="lab"],
.data-strip [class*="lbl"], .stat-strip [class*="lbl"], body.cs .card [class*="lbl"] {
  color: var(--rv-text-3) !important; -webkit-text-fill-color: var(--rv-text-3) !important;
}
/* cards keep a border rather than a fill */
body.cs .card { border: 1px solid var(--rv-line) !important; border-radius: 3px !important; }

/* table headers are intentionally navy — keep white text legible */
thead th, th { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ---------- 15. HEADLINE ACCENT NORMALISATION ------------------
   Legacy themes coloured headline fragments in their own accent
   (green, teal, gold). Force everything to the single accent.
---------------------------------------------------------------- */
h1 em, h1 span, h1 i, h1 b,
.hero-title em, .hero-title span, .hero-title i,
h2 em, h2 span, h3 em, h3 span {
  color: var(--rv-accent) !important;
  -webkit-text-fill-color: var(--rv-accent) !important;
  background: none !important;
  background-image: none !important;
}
/* but plain bold inside headings stays ink */
h1 strong, h2 strong, h3 strong,
.hero-title strong {
  color: var(--rv-text) !important;
  -webkit-text-fill-color: var(--rv-text) !important;
}
/* strike-through fragments stay muted */
.strike, .hero-title .strike, s, del {
  color: var(--rv-text-4) !important;
  -webkit-text-fill-color: var(--rv-text-4) !important;
  text-decoration: line-through !important;
}