/*
 * Verzainvest theme — charcoal + orange.
 * Loaded last on every html/ page; the website (site/theme.css) and the React app
 * (frontend/src/theme.css) use identical copies — keep all three in sync.
 *
 * Neutral charcoal surfaces, orange (from the logo) for the menu, actions and highlights,
 * teal/red only for positive and negative news. Squarer corners, no glow gradients.
 */
/* Charcoal + orange. Contrast (WCAG) on panels — dark: text 15.1:1, muted 6.8:1, orange
   6.7:1, dark label on orange 7.4:1; light: orange 5.2:1, positive 4.9:1, negative 5.9:1
   on white. Orange (17°) and the negative red (345°) are kept apart so "watched" and
   "negative" never look alike. */
:root {
  color-scheme: dark;
  --bg: #0e1013;
  --bg-glow: #0e1013;
  --panel: #171a1f;
  --panel-2: #1f232a;
  --border: #2c323c;
  --text: #eceff3;
  --muted: #9aa3b0;
  --accent: #ff7a45;
  --accent-2: #f2602a;
  --on-accent: #1a0d05;
  --pos: #2fd3b5;
  --neg: #ff4f7b;
  --neutral: #8a93a3;
  --warn: #f7b733;
  --violet: #d6cfc7;

  --vneg-bg: rgba(255, 79, 123, 0.2); --vneg-text: #ff8aa8; --vneg-border: rgba(255, 79, 123, 0.5);
  --neg-bg: rgba(255, 79, 123, 0.1); --neg-text: #ffa6bd; --neg-border: rgba(255, 79, 123, 0.3);
  --neu-bg: rgba(138, 147, 163, 0.14); --neu-text: #b3bac6; --neu-border: rgba(138, 147, 163, 0.34);
  --pos-bg: rgba(47, 211, 181, 0.1); --pos-text: #8ce9d8; --pos-border: rgba(47, 211, 181, 0.3);
  --vpos-bg: rgba(47, 211, 181, 0.2); --vpos-text: #5fe0c8; --vpos-border: rgba(47, 211, 181, 0.5);
  --topbar-bg: rgba(14, 16, 19, 0.95);
  --topbar-grad: rgba(14, 16, 19, 0);
  --header-row-bg: #1b1e24;
  --shadow: rgba(0, 0, 0, 0.6);
  --shadow-soft: rgba(0, 0, 0, 0.35);
  --hover-bg: rgba(236, 239, 243, 0.04);
  --zebra-bg: rgba(236, 239, 243, 0.02);
  --scrollbar-thumb: #343b46;
  --accent-glow: rgba(255, 122, 69, 0.14);
  --tag-bg: rgba(214, 207, 199, 0.09); --tag-text: #d6cfc7; --tag-border: rgba(214, 207, 199, 0.26);
  --pos-bar: rgba(47, 211, 181, 0.6); --neg-bar: rgba(255, 79, 123, 0.6);

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f2;
  --bg-glow: #f6f6f2;
  --panel: #ffffff;
  --panel-2: #f0f0ea;
  --border: #dcdcd2;
  --text: #14161a;
  --muted: #565b66;
  --accent: #c2410c;
  --accent-2: #9a3412;
  --on-accent: #ffffff;
  --pos: #0a7f6b;
  --neg: #c0263f;
  --neutral: #5f6672;
  --warn: #a16207;
  --violet: #57534e;

  --vneg-bg: rgba(192, 38, 63, 0.1); --vneg-text: #a11d34; --vneg-border: rgba(192, 38, 63, 0.35);
  --neg-bg: rgba(192, 38, 63, 0.06); --neg-text: #b0223b; --neg-border: rgba(192, 38, 63, 0.22);
  --neu-bg: rgba(95, 102, 114, 0.08); --neu-text: #484d57; --neu-border: rgba(95, 102, 114, 0.25);
  --pos-bg: rgba(10, 127, 107, 0.07); --pos-text: #086b5a; --pos-border: rgba(10, 127, 107, 0.24);
  --vpos-bg: rgba(10, 127, 107, 0.12); --vpos-text: #075e50; --vpos-border: rgba(10, 127, 107, 0.36);
  --topbar-bg: rgba(255, 255, 255, 0.95);
  --topbar-grad: rgba(255, 255, 255, 0);
  --header-row-bg: #f7f7f3;
  --shadow: rgba(20, 22, 26, 0.12);
  --shadow-soft: rgba(20, 22, 26, 0.06);
  --hover-bg: rgba(20, 22, 26, 0.035);
  --zebra-bg: rgba(20, 22, 26, 0.02);
  --scrollbar-thumb: #cfcfc4;
  --accent-glow: rgba(194, 65, 12, 0.1);
  --tag-bg: rgba(87, 83, 78, 0.07); --tag-text: #57534e; --tag-border: rgba(87, 83, 78, 0.22);
  --pos-bar: rgba(10, 127, 107, 0.55); --neg-bar: rgba(192, 38, 63, 0.55);
}

/* Typography: geometric display face for headings, a humanist sans for text. */
body, button, input, select, textarea { font-family: var(--font-sans); }
h1, h2, h3, .page-title, .modal-title, .widget-title { font-family: var(--font-display); letter-spacing: -0.02em; }
body { background: var(--bg); letter-spacing: normal; word-spacing: 0.06em; }
/* The previous look tightened letters (-0.01em); with this face that closes up words. */
.topbar-inner, .brand, .nav-link, p, li, span, a, button, input, td, th, label { letter-spacing: normal; }

/* Squarer controls instead of pills. */
.btn, .chip-btn, .btn-primary, .nav-link, .seg-tabs, .seg-tab, .type-chip, .tab, .pill,
.search-box input, .command-search input, input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  border-radius: var(--radius-sm);
}
.btn-primary, .add-btn, button.primary { color: var(--on-accent); }

/* Menu: the active page is a solid orange tab, the others turn orange on hover. */
.nav-link:hover { color: var(--accent); }
.nav-link.active { background: var(--accent); color: var(--on-accent); box-shadow: none; border-radius: var(--radius-sm); }
.nav-link.active:hover { color: var(--on-accent); }
/* In the mobile ☰ panel the active row is orange text on a soft orange band instead. */
@media (max-width: 760px) {
  html.menu-open .nav-links .nav-link.active { background: var(--accent-glow); color: var(--accent); }
}

/* Cards sit a touch above the page. */
.widget, .card, .cal-row, .panel-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px var(--shadow-soft); }