/* ===== VantoreAI — vibrant theme overlay (light + dark) ===== */
:root {
  --va-cyan: #00d5f2;
  --va-blue: #1670f0;
  --va-indigo: #2563eb;
  --va-grad: linear-gradient(135deg, #00d5f2 0%, #1780f2 55%, #2563eb 100%);
}

/* ---------- LIGHT palette (default) ---------- */
:root:not([data-theme="dark"]) {
  --color-canvas: #eaf4fc;
  --color-panel: #ffffff;
  --color-raised: #e6f1fa;
  --color-hover: #d8e9f7;
  --color-mist: #d8e9f7;
  --color-line-soft: #e2eef8;
  --color-line: #cfe2f1;
  --color-line-strong: #a8c5da;
  --color-fg: #0d1c2b;
  --color-soft: #1f364a;
  --color-muted: #4a6175;
  --color-faint: #7b91a4;
  --color-primary: #0d1c2b;
  --color-primary-hover: #16293e;
  --color-on-primary: #f2f8ff;
  --color-navy: #0b1a2a;
  --color-navy-raised: #122538;
  --color-navy-line: #2a4a66;
  --color-navy-edge: #0b1a2a;
  --color-on-navy: #eef6fd;
  --color-on-navy-muted: #a7bccd;
  --color-mint: #00c2ec;
  --color-mint-ink: #036b8a;
  --color-mint-tint: #d8f3fc;
  --color-blueprint: #5aa9e6;
  --color-blueprint-ink: #1668a8;
  --color-blueprint-tint: #dcecfb;
  --color-amber: #e0ad55;
  --color-amber-ink: #8a5e12;
  --color-amber-tint: #fbf0d8;
  --color-rose: #e2797a;
  --color-rose-ink: #b03b3b;
  --color-rose-tint: #fbe3e3;
}

/* ---------- DARK palette (vibrant) ---------- */
[data-theme="dark"] {
  --color-canvas: #08131f;
  --color-panel: #0e1e2e;
  --color-raised: #13273a;
  --color-hover: #1a3247;
  --color-mist: #122335;
  --color-line-soft: #16293a;
  --color-line: #22405a;
  --color-line-strong: #3a6486;
  --color-fg: #eaf4fb;
  --color-soft: #c7dae8;
  --color-muted: #94aec4;
  --color-faint: #6f8aa0;
  --color-primary: #00b7e0;
  --color-primary-hover: #22d0f5;
  --color-on-primary: #04121d;
  --color-navy: #061019;
  --color-navy-raised: #0b1b2a;
  --color-navy-line: #22456a;
  --color-navy-edge: #1d3f60;
  --color-on-navy: #eaf4fb;
  --color-on-navy-muted: #9fb8cc;
  --color-mint: #2ad8f5;
  --color-mint-ink: #9fe9fb;
  --color-mint-tint: #0c2b38;
  --color-blueprint: #5fb4ea;
  --color-blueprint-ink: #9ad2f5;
  --color-blueprint-tint: #0f2a3e;
  --color-amber: #e8c07a;
  --color-amber-ink: #f0d9a5;
  --color-amber-tint: #2c2413;
  --color-rose: #f08b8b;
  --color-rose-ink: #f5b8b8;
  --color-rose-tint: #33191b;
}

/* ---------- page backgrounds ---------- */
html { background: #eaf4fc; }
body {
  background:
    radial-gradient(1200px 620px at 0% -12%, rgba(0, 213, 242, 0.50), transparent 55%),
    radial-gradient(1000px 560px at 100% -6%, rgba(79, 70, 229, 0.38), transparent 55%),
    radial-gradient(900px 700px at 50% 118%, rgba(0, 194, 236, 0.34), transparent 60%),
    linear-gradient(158deg, #cbe8fb 0%, #ddeffd 38%, #cfe6fb 68%, #d7ecfd 100%) !important;
  background-attachment: fixed;
}
html[data-theme="dark"] { background: #08131f; }
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 640px at 0% -12%, rgba(0, 213, 242, 0.22), transparent 55%),
    radial-gradient(1000px 580px at 100% -6%, rgba(79, 70, 229, 0.28), transparent 55%),
    radial-gradient(900px 720px at 50% 118%, rgba(0, 183, 224, 0.16), transparent 60%),
    linear-gradient(158deg, #071320 0%, #0a1a2b 42%, #0b1f33 72%, #081726 100%) !important;
  background-attachment: fixed;
}

/* ---------- accent / brand ---------- */
h1 {
  background: var(--va-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.label-caps { color: #1668a8; }
[data-theme="dark"] .label-caps { color: #7cc8ec; }

.bg-primary {
  background-image: var(--va-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px -10px rgba(23, 128, 242, 0.65), 0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
}
.bg-primary:hover { filter: brightness(1.07) saturate(1.05); }

.bg-navy {
  background-image: linear-gradient(155deg, #0b1a2a 0%, #12294a 58%, #142b52 100%) !important;
}
.bg-panel {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 34px -26px rgba(13, 55, 96, 0.5);
}
[data-theme="dark"] .bg-panel {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -28px rgba(0, 0, 0, 0.75);
}

.bg-blueprint-ink { background-image: var(--va-grad) !important; }
.border-blueprint\/60, .border-blueprint { border-color: rgba(22, 128, 242, 0.45) !important; }

::selection { background: rgba(0, 213, 242, 0.35); }

/* ---------- section tints ---------- */
section[aria-labelledby="hero-title"] {
  background:
    radial-gradient(760px 420px at 10% -25%, rgba(0, 213, 242, 0.40), transparent 62%),
    radial-gradient(760px 420px at 92% -15%, rgba(37, 99, 235, 0.32), transparent 62%),
    linear-gradient(180deg, rgba(0, 194, 236, 0.10), transparent 78%) !important;
}
section[aria-labelledby="start-title"],
section[aria-labelledby="market-title"] {
  background: linear-gradient(180deg, rgba(0, 194, 236, 0.08), transparent 65%) !important;
}
section[aria-labelledby="network-title"],
section[aria-labelledby="economy-title"] {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.075), transparent 65%) !important;
}
a.link-text, a.link-draw { color: #0f6fc4; }
[data-theme="dark"] a.link-text,
[data-theme="dark"] a.link-draw { color: #7cc8ec; }