/* Vaghaye palette: midnight navy, warm orange, and blue-tinted reading surfaces. */
:root {
  color-scheme: dark;
  --bg: #0b1728;
  --sidebar: #0d2037;
  --surface: #14263b;
  --surface-2: #1b3048;
  --surface-3: #25415e;
  --line: #2c435b;
  --line-2: #58718b;
  --text: #edf3fa;
  --muted: #b4c4d4;
  --dim: #91a7bd;
  --green: #ff9b51;
  --lime: #ffb66f;
  --cyan: #80add8;
  --blue: #a6c3e2;
  --amber: #ffc585;
  --orange: #ec793b;
  --pink: #dca986;
  --accent-fill: #ffad64;
  --accent-ink: #18263a;
  --focus: #ffbd7a;
  --hero: #102842;
  --heat-rgb: 255, 155, 81;
  --viz-glow: #ff9b511d;
  --viz-grid: #80add818;
  --shadow: 0 16px 42px #030d1b6b;
}

:root[data-theme=light] {
  color-scheme: light;
  --bg: #eaf0f6;
  --sidebar: #102942;
  --surface: #f2f6fa;
  --surface-2: #e0eaf3;
  --surface-3: #d2e0ec;
  --line: #bfcedd;
  --line-2: #8298b0;
  --text: #182d45;
  --muted: #50667d;
  --dim: #60778d;
  --green: #b4541d;
  --lime: #ad4e18;
  --cyan: #2e628f;
  --blue: #345e88;
  --amber: #9e541f;
  --orange: #bd531d;
  --pink: #8d5c76;
  --accent-fill: #f59a53;
  --accent-ink: #192c43;
  --focus: #a84b17;
  --hero: #102b47;
  --heat-rgb: 225, 111, 45;
  --viz-glow: #de7c2c18;
  --viz-grid: #315d8620;
  --shadow: 0 14px 38px #10294320;
}

html, body { background: var(--bg); }
:where(button, a, input, select, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.topbar, [data-theme=light] .topbar { background: var(--bg); border-color: var(--line); }
.status.ready:before, .live-dot { background: var(--accent-fill); box-shadow: 0 0 0 4px #ff9b5122; }
.skip, .button.accent, [data-theme=light] .button.accent { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); }
.button.accent:hover, [data-theme=light] .button.accent:hover { background: #ffc184; border-color: #ffc184; }
.eyebrow, .cc-eyebrow, .cc-archive, .recent-list-card li em, .cc-growth, .gap.positive { color: var(--green); }
.page-head { background: radial-gradient(circle at 11% 14%, #e4773035, transparent 34%), linear-gradient(115deg, #173654, #0e263e 72%); border-color: #496480; box-shadow: 0 10px 30px #06112130; --text: #f5f8fc; --muted: #cfdae6; --line-2: #8da4b8; --green: #ffac65; --lime: #ffc181; }
.page-head h1 { color: #f5f8fc; }
.page-head p { color: #cfdae6; }
.page-head .eyebrow { color: #ffbd7a; }
.page-head .button { color: #f5f8fc; border-color: #849bb0; }
.page-head .button:hover { background: #274a6a; }
.page-head .button.accent { background: #ffad64; color: #192c43; border-color: #ffad64; }

/* The original black mark becomes a clean white glyph on an orange tile. */
#sidebar, [data-theme=light] #sidebar { background: #102942; color: #edf3fa; --text: #edf3fa; --muted: #b8c9d8; --dim: #98aec2; --line: #35526e; --line-2: #718ba3; --surface: #173550; --surface-2: #21415d; --surface-3: #2b4e6a; --green: #ffad64; --lime: #ffc181; }
#sidebar .brand { position: relative; isolation: isolate; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; align-items: center; padding: 15px 12px; margin-bottom: 4px; background: radial-gradient(circle at 8% 0%, #ee884a30, transparent 49%), linear-gradient(135deg, #203b58, #122b45); border: 1px solid #6c7481; border-radius: 16px; box-shadow: 0 11px 24px #050e1e6b, inset 0 1px 0 #ffffff1c; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
#sidebar .brand::before { content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; inset-inline-end: -40px; inset-block-start: -65px; border-radius: 50%; background: #f48b4930; filter: blur(8px); }
#sidebar .brand::after { content: ""; position: absolute; inset-inline: 14px; inset-block-end: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffac65, transparent); }
#sidebar .brand:hover { transform: translateY(-2px); border-color: #ffad64; box-shadow: 0 15px 28px #050e1e80, inset 0 1px 0 #ffffff24; }
#sidebar .brand:focus-visible { outline-color: #ffbd7a; }
#sidebar .brand-icon { width: 48px; height: 48px; display: grid; place-items: center; padding: 6px; border: 1px solid #ffd09a70; border-radius: 13px; background: linear-gradient(145deg, #ffb971, #ed7e39); box-shadow: 0 6px 16px #050e1e55, inset 0 1px 0 #ffffff5c; }
#sidebar .brand-icon img { display: block; width: 36px; height: 36px; border-radius: 0; object-fit: contain; filter: invert(1); mix-blend-mode: screen; }
#sidebar .brand-copy { min-width: 0; display: block; }
#sidebar .brand .edition { display: none; }
#sidebar .brand b { color: #f5f8fc; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
#sidebar .brand small { color: #c9d8e5; font-size: 9px; line-height: 1.7; margin-top: 4px; }
#sidebar .nav-item.active, [data-theme=light] #sidebar .nav-item.active { background: #ffad64; color: #192c43; box-shadow: inset 3px 0 0 #ffd298; }
#sidebar .nav-item:hover:not(.active), [data-theme=light] #sidebar .nav-item:hover:not(.active) { background: #294967; color: #f5f8fc; }
#sidebar .edition, [data-theme=light] #sidebar .edition { background: #21415d; color: #c9d8e5; }
#navigation { scrollbar-color: #6d8195 transparent; }

[data-theme=light] .cc-topic, [data-theme=light] .headline-card, [data-theme=light] .network-tip { background: var(--surface); }
[data-theme=light] .cc-topic:hover, [data-theme=light] .data-table tbody tr:hover, [data-theme=light] .connection-row:hover { background: #e4edf5; border-color: #9eb3c7; }
[data-theme=light] .cc-topic.selected { background: #f9e7d8; border-color: #c9672b; box-shadow: inset -3px 0 0 #e9813d, 0 8px 20px #10294316; }
[data-theme=light] .cc-topic-number, [data-theme=light] .cc-growth, [data-theme=light] .headline-card>span, [data-theme=light] .insight .signal, [data-theme=light] .kpi-top>svg, [data-theme=light] .cc-published-note a { color: var(--green)!important; }
[data-theme=light] .cc-topic-branches { border-color: #c4d4e2; }
[data-theme=light] .cc-topic-branches>span, [data-theme=light] .cc-lead, [data-theme=light] .cc-branches button { color: var(--text); }
[data-theme=light] .cc-branches button { border-color: var(--line-2); }
[data-theme=light] .cc-branches button:hover { background: #f9e7d8; }
[data-theme=light] .cc-branches button[aria-pressed=true], [data-theme=light] .cc-segments button[aria-pressed=true] { background: #f6a15c; color: #182d45; border-color: #c9672b; }
[data-theme=light] .cc-branches button[aria-pressed=true] b { color: #182d45; }
[data-theme=light] .cc-search:focus-within { outline-color: var(--focus); }
[data-theme=light] .cc-evidence-icon { background: #f9e5d4; color: #ab4f1c; }
[data-theme=light] .cc-mobile-nav { background: #eaf0f6; }
[data-theme=light] .cc-mobile-nav a { color: #405d79; }
[data-theme=light] body[data-route=overview] .cc-mobile-nav [data-route=overview], [data-theme=light] body[data-route=published-trends] .cc-mobile-nav [data-route=published-trends], [data-theme=light] body[data-route=directory] .cc-mobile-nav [data-route=directory], [data-theme=light] body[data-route=topics] .cc-mobile-nav [data-route=topics] { background: #ffad64; color: #182d45; }
body[data-route=network] .cc-mobile-nav [data-route=network] { background: #ffad64; color: #182d45; }
[data-theme=light] .network { background: #e0eaf3; }
[data-theme=light] .network text { fill: #182d45; }
[data-theme=light] .network circle { stroke: #eaf0f6; }
[data-theme=light] .network line { stroke: #8298b0; }
[data-theme=light] .heatmap .cell { outline-color: #bfd0df; }
[data-theme=light] .heatmap .cell:hover:after { background: #102942; color: #f2f6fa; }
[data-theme=light] .matrix .matrix-cell>span { color: #182d45; }
[data-theme=light] .cc-quality .alert { background: #f2f6fa; color: #50667d; border-color: #bfcedd; }
[data-theme=light] input::placeholder { color: #60778d; opacity: 1; }

.cc-topic:hover { background: #1e3a55; border-color: #a77258; }
.cc-topic.selected { background: #2b3c4c; border-color: #f0a16b; box-shadow: inset -3px 0 0 #ffad64; }
.cc-topic-branches { border-color: #4e5e6b; }
.cc-topic-branches>span, .cc-lead, .cc-branches button { color: var(--text); }
.cc-branches button { border-color: var(--line-2); }
.cc-branches button[aria-pressed=true], .cc-segments button[aria-pressed=true] { background: #ffad64; color: #192c43; border-color: #ffad64; }
.cc-branches button[aria-pressed=true] b { color: #192c43; }
.cc-bars meter::-webkit-meter-optimum-value { background: #ffad64; }
.cc-bars meter::-moz-meter-bar { background: #ffad64; }
.cc-bars .previous meter::-webkit-meter-optimum-value { background: #7297b7; }
.cc-bars .previous meter::-moz-meter-bar { background: #7297b7; }
.recent-toolbar { box-shadow: 0 8px 24px #07152720; }
.recent-ranges button[aria-pressed=true], .recent-custom button { background: #ffad64; border-color: #ffad64; color: #192c43; }
.recent-ranges button:hover, .recent-custom button:hover { border-color: #ffad64; }
.recent-ranges button:focus-visible, .recent-custom button:focus-visible, .recent-custom input:focus-visible { outline-color: var(--focus); }
.recent-list-card li:hover:not(.recent-empty) { background: #ff9b5118; }
.what-is-button { background: linear-gradient(135deg, #ffbd79, #f18943); border-color: #ffd099; color: #192c43; box-shadow: 0 7px 20px #06132161; }
.what-is-button:hover { box-shadow: 0 11px 24px #06132178; }
.what-is-cover { background: radial-gradient(circle at 15% 80%, #f18a3d3d, transparent 43%), linear-gradient(125deg, #163753, #0d2037); color: #f2f6fa; }
.what-is-kicker { color: #ffc181; }
.what-is-cover p { color: #cfdae6; }
.public-explore { box-shadow: 0 6px 22px #10294318; }
.public-explore nav a:hover { background: #f9e7d8; }

/* Readable accents for the separate published-trends page. */
.trends-page .trend-tabs a[aria-current], .trends-page .trend-label { background: #583923; border-color: #ad6639; color: #ffd4a8; }
.trends-page .trend-weekly .trend-label, .trends-page .trend-monthly .trend-label { background: #263d56; color: #b8d4ef; }
@media (min-width:981px) and (max-width:1250px) { #sidebar .brand { grid-template-columns: 44px minmax(0,1fr); gap: 8px; padding: 12px 9px; } #sidebar .brand-icon { width: 44px; height: 44px; } #sidebar .brand-icon img { width: 32px; height: 32px; } #sidebar .brand b { font-size: 21px; } }
@media (prefers-reduced-motion:reduce) { #sidebar .brand, .what-is-button { transition: none; } }