/* ═══════════════════════════════
   THEME VARIABLES
═══════════════════════════════ */
:root {
  --accent:     #00c896;
  --accent2:    #00a07a;
  --accent-dim: rgba(0,200,150,0.12);
  --accent-glow:rgba(0,200,150,0.06);
  --danger:     #e8455a;
  --danger-dim: rgba(232,69,90,0.12);
  --info:       #4d9fff;
  --info-dim:   rgba(77,159,255,0.1);
  --disc-color:     #00c896;
  --disc-color-dim: rgba(0,200,150,0.12);
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --prop:      #a970ff;                /* Elite Prop — amethyst, the crown tier */
  --prop2:     #7d4fd1;                /* deeper shade for gradients/borders */
  --prop-dim:  rgba(169,112,255,0.14); /* badge / wash */
  --prop-glow: rgba(169,112,255,0.35); /* soft outer glow */
}

[data-theme="default"] {
  --bg:       #0d1117;
  --surface:  #161b22;
  --surface2: #1c2330;
  --surface3: #21293a;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.10);
  --text:     #e6edf3;
  --text2:    #8b949e;
  --text3:    #7a8290;
  --shadow:   0 2px 16px rgba(0,0,0,0.4);
  --mb:       rgba(0,200,150,0.05);
  --ub:       rgba(77,159,255,0.07);
  --text-high-contrast:     #ffffff;
  --text-sub-high-contrast: #cbd5e1;
  --label-high-contrast:    #e2e8f0;
  --border-high-contrast:   #475569;
  --warn:       #a8b8cc;
  --warn-dim:   rgba(168,184,204,0.10);
}

[data-theme="dark"] {
  --bg:       #050608;
  --surface:  #0c0e12;
  --surface2: #111318;
  --surface3: #16191f;
  --border:   rgba(255,255,255,0.05);
  --border2:  rgba(255,255,255,0.09);
  --text:     #f0f6fc;
  --text2:    #7d8590;
  --text3:    #7a8290;
  --shadow:   0 2px 24px rgba(0,0,0,0.7);
  --mb:       rgba(0,200,150,0.06);
  --ub:       rgba(77,159,255,0.08);
  --text-high-contrast:     #ffffff;
  --text-sub-high-contrast: #cbd5e1;
  --label-high-contrast:    #e2e8f0;
  --border-high-contrast:   #475569;
  --warn:       #a8b8cc;
  --warn-dim:   rgba(168,184,204,0.10);
}

[data-theme="light"] {
  --bg:       #f0f4f8;
  --surface:  #ffffff;
  --surface2: #f6f8fa;
  --surface3: #eef1f5;
  --border:   rgba(0,0,0,0.07);
  --border2:  rgba(0,0,0,0.12);
  --text:     #1a2030;
  --text2:    #2c3547; /* was #5a6478 — still readable at 5.95:1 but visually reads as "grey"; this is 12.30:1, dark charcoal-navy instead */
  --text3:    var(--text2); /* capped at --text2 — nothing should render lighter/greyer than that */
  --shadow:   0 2px 12px rgba(0,0,0,0.08);
  --mb:       rgba(0,200,150,0.06);
  --ub:       rgba(77,159,255,0.06);
  --accent:   #009f78;
  --accent2:  #007a5e;
  /* These 4 were previously declared ONCE, unconditionally, in index.html's
     <style> block with fixed near-white values (#ffffff / #cbd5e1 / #e2e8f0)
     — correct for a dark background, invisible against this theme's white
     --surface. That's the actual cause of nearly every faint label/value in
     the screenshots (Settings rows, risk labels, stat values, section
     titles all route through these). Scoping them per-theme here, with
     properly dark values for light mode, fixes all of it at the source. */
  --text-high-contrast:     #1a2030;
  --text-sub-high-contrast: #2c3547;
  --label-high-contrast:    #2c3547;
  --border-high-contrast:   #94a3b8;
  --warn:       #92400e; /* was #a8b8cc — a blue-gray, not even amber-colored, and only 2.02:1 contrast. This is a genuine amber-brown at 7.09:1. */
  --warn-dim:   rgba(146,64,14,0.10);
}