/* theme.css — light/dark colour tokens. Loaded LAST on every page so it overrides each page's
   own :root block. Light is the default (finance readers expect white; dark green + neon read as
   a template). Dark is kept for people who prefer it: <html data-theme="dark">, set by theme.js.

   Rules for anyone editing colours from here on:
     - never hard-code a colour in a page; use these tokens
     - --accent is for links/brand, --pos / --neg are ONLY for gains and losses
     - provider brand colours (ARK purple, Global X orange…) stay as they are in both themes */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --surface2: #f4f7f6;          /* table headers, inset panels */
  --hover: #f0f5f3;             /* table row hover */
  --border: #e2e8e6;
  --text: #10201b;
  --muted: #5f716c;             /* labels, captions */
  --muted2: #3d4d49;            /* secondary text */
  --on-accent: #ffffff;         /* text on a filled accent button */
  --accent: #0f5c8c;            /* links, buttons — blue so it never reads as a gain */
  --brand: #0b7a56;             /* the logo mark only */
  --accent-bg: rgba(15,92,140,.07);
  --accent-bg2: rgba(15,92,140,.13);
  --accent-line: rgba(15,92,140,.26);
  --super: #0f5c8c;             /* TickerSwipe super like */
  --pos: #0a7a4d;               /* gains / buys */
  --neg: #c22a22;               /* losses / sells */
  --pos-bg: rgba(10,122,77,.08);
  --pos-line: rgba(10,122,77,.24);
  --neg-bg: rgba(194,42,34,.07);
  --neg-line: rgba(194,42,34,.24);
  --tip-bg: #10221d; --tip-line: #24382f; --tip-text: #e8f0ed;
  --shadow: 0 1px 2px rgba(16,32,27,.05), 0 6px 20px rgba(16,32,27,.06);
  /* Chart lines (Cathie Wood tracker). Validated for a light surface: worst adjacent
     colour-blind separation ΔE 9.1, normal-vision 19.6; every line is also labelled. */
  --c-avg: #2a78d6;
  --c-arkk: #eb6834;
  --c-arkq: #1baf7a;
  --c-arkw: #eda100;
  --c-arkg: #e87ba4;
  --c-arkf: #008300;
  --c-arkx: #4a3aa7;
  --c-spy: #33322f;
  --c-qqq: #71706a;
  --c-dia: #adaca4;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #080b0a;
  --card: #111815;
  --surface2: #0d1210;
  --hover: #141c19;
  --border: #1a2420;
  --text: #e2ede9;
  --muted: #5a7870;
  --muted2: #8aa89e;
  --on-accent: #05120e;
  --accent: #00e5a0;
  --brand: #00e5a0;
  --accent-bg: rgba(0,229,160,.08);
  --accent-bg2: rgba(0,229,160,.14);
  --accent-line: rgba(0,229,160,.2);
  --super: #6ea8ff;
  --pos: #00e5a0;
  --neg: #f87171;
  --pos-bg: rgba(0,229,160,.08);
  --pos-line: rgba(0,229,160,.2);
  --neg-bg: rgba(248,113,113,.08);
  --neg-line: rgba(248,113,113,.2);
  --tip-bg: #1c2820; --tip-line: #1a2420; --tip-text: #8aa89e;
  --shadow: 0 8px 24px rgba(0,0,0,.5);
  /* Chart lines, stepped for the dark surface */
  --c-avg: #3987e5;
  --c-arkk: #d95926;
  --c-arkq: #199e70;
  --c-arkw: #c98500;
  --c-arkg: #d55181;
  --c-arkf: #008300;
  --c-arkx: #9085e9;
  --c-spy: #e0dfd8;
  --c-qqq: #a8a79f;
  --c-dia: #767570;
  color-scheme: dark;
}

/* Cards need an edge on white; on dark the background difference did that job. */
:root:not([data-theme="dark"]) .held-card,
:root:not([data-theme="dark"]) .bio-panel,
:root:not([data-theme="dark"]) .table-wrap,
:root:not([data-theme="dark"]) .stat-card,
:root:not([data-theme="dark"]) .feature-card { box-shadow: var(--shadow); }

/* Logo eye: a mask, so the mark takes the theme's accent colour instead of a baked-in green. */
.logo::before, .pm-head a::before {
  background: var(--brand) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M4 20 Q32 -4 60 20 Q32 44 4 20 Z' fill='none' stroke='%23000' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='20' r='8.5' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M4 20 Q32 -4 60 20 Q32 44 4 20 Z' fill='none' stroke='%23000' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='20' r='8.5' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The "peek" in the wordmark follows the brand colour, not the link colour. */
.logo em, .hero h1 em, .ticker-symbol em { color: var(--brand); }

/* Breathing room between the wordmark and whatever sits next to it (the nav links ran
   straight into the "k" of ETFpeek). */
nav { gap: 18px; }
nav .logo { margin-right: 10px; }
@media (max-width: 640px) { nav .logo { margin-right: 0; } }

/* Wide monitors: 1120px left huge empty margins on a 1440p+ screen. Step the content
   width up so the tables use the space, while keeping a comfortable line length. */
@media (min-width: 1400px) { .wrap { max-width: 1280px; } }
@media (min-width: 1700px) { .wrap { max-width: 1460px; } }
@media (min-width: 2100px) { .wrap { max-width: 1600px; } }

/* Tablet widths: the nav links no longer fit beside the search box once "TickerSwipe" is
   spelled out, so below 900px they live in the ☰ menu instead (tablet nav). */
@media (max-width: 900px) { nav .nav-links { display: none; } }

/* Theme switch (added to every nav by theme.js) */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--muted2);
  cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; }
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
.theme-btn svg { width: 16px; height: 16px; }
nav > .theme-btn { margin-left: auto; }
nav > .theme-btn ~ .pm-btn { margin-left: 8px; }
@media (max-width: 640px) { nav > .theme-btn { position: absolute; top: 14px; right: 50px; margin: 0; } }
.theme-btn .t-sun { display: none; }
:root[data-theme="dark"] .theme-btn .t-sun { display: block; }
:root[data-theme="dark"] .theme-btn .t-moon { display: none; }