/* ==========================================================================
   Udim dual-theme layer

   Loaded in BOTH themes, after theme-dark.css / theme-light.css.
   It owns exactly three things:
     1. which theme's markup variant is visible,
     2. the canvas colour tokens app.js reads,
     3. the theme switch control.

   It must not restyle shared page furniture — that belongs to each theme's
   own stylesheet, only one of which is enabled at a time.
   ========================================================================== */

/* --- Variant visibility ---------------------------------------------------
   Elements marked data-theme-only are shown only under their own theme.
   !important is required: both theme stylesheets set display on some of
   these elements inside media queries (e.g. .hero-mobile-summary becomes
   display:grid on mobile), which would otherwise win.
   -------------------------------------------------------------------------- */
[data-theme="light"] [data-theme-only="dark"],
[data-theme="dark"] [data-theme-only="light"] { display: none !important; }

/* --- Canvas tokens --------------------------------------------------------
   The charts and particle fields are drawn in JS, so their colours cannot
   come from a stylesheet rule. app.js reads these custom properties at draw
   time instead of hardcoding one build's palette. Values are exactly those
   the two source builds used.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --canvas-market-line: #86a8ff;
  --canvas-market-fill: rgba(134, 168, 255, .2);
  --canvas-equity-line: #8be0c0;
  --canvas-equity-fill: rgba(139, 224, 192, .14);
  --canvas-fade: rgba(134, 168, 255, 0);
  --canvas-field-rgb: 134, 168, 255;

  --radar-ring: rgba(240, 239, 233, .10);
  --radar-axis: rgba(240, 239, 233, .08);
  --radar-label: rgba(190, 196, 205, .86);
  --risk-conservative: #86a8ff;
  --risk-conservative-fill: rgba(134, 168, 255, .15);
  --risk-balanced: #c69869;
  --risk-balanced-fill: rgba(198, 152, 105, .15);
  --risk-dynamic: #8be0c0;
  --risk-dynamic-fill: rgba(139, 224, 192, .15);
}

:root[data-theme="light"] {
  --canvas-market-line: #338bc5;
  --canvas-market-fill: rgba(51, 139, 197, .16);
  --canvas-equity-line: #b78932;
  --canvas-equity-fill: rgba(183, 137, 50, .12);
  --canvas-fade: rgba(61, 145, 205, 0);
  --canvas-field-rgb: 51, 139, 197;

  --radar-ring: rgba(24, 50, 76, .12);
  --radar-axis: rgba(24, 50, 76, .09);
  --radar-label: rgba(45, 67, 88, .82);
  --risk-conservative: #338bc5;
  --risk-conservative-fill: rgba(51, 139, 197, .14);
  --risk-balanced: #b78932;
  --risk-balanced-fill: rgba(183, 137, 50, .13);
  --risk-dynamic: #2f806c;
  --risk-dynamic-fill: rgba(47, 128, 108, .12);
}

/* --- Theme switch ---------------------------------------------------------
   Styled from currentColor only, so it reads correctly on both the porcelain
   light header and the midnight dark header without depending on either
   stylesheet's custom properties.
   -------------------------------------------------------------------------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .68;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}

.theme-switch:hover { opacity: 1; }

.theme-switch:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.theme-switch svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show the icon for the mode the switch will move you to. */
.theme-switch .icon-sun { display: none; }
:root[data-theme="dark"] .theme-switch .icon-sun { display: block; }
:root[data-theme="dark"] .theme-switch .icon-moon { display: none; }

@media (max-width: 760px) {
  .theme-switch { gap: 0; padding: 0 10px; }
  .theme-switch .theme-switch-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch { transition: none; }
}