/* MoneyMan theme — generated from BRAND_GUIDELINES.md §9 design tokens.
   Dark-first neon cyberpunk. Do not hard-code hex elsewhere; use these vars. */

:root {
  /* Primary — Voltage & Void */
  --mm-void: #0A0A0F;
  --mm-carbon: #15151F;
  --mm-steel: #23232F;
  --mm-pink: #FF2E97;       /* signature — primary action, focus */
  --mm-pink-glow: #FF6EC7;

  /* Secondary — Synth Spectrum */
  --mm-cyan: #00F0FF;
  --mm-teal: #19E3C2;       /* gains, healthy, sandbox/TEST */
  --mm-violet: #A35CFF;     /* AI / Claude */
  --mm-ink-blue: #1B1E3C;

  /* Accent — Hazard (<=10%) */
  --mm-lime: #C6FF3D;
  --mm-amber: #FFB020;      /* warnings, pending */
  --mm-red: #FF3B47;        /* losses, destructive */

  /* Text */
  --mm-ghost: #E8E8F0;      /* reading text — never neon */
  --mm-muted: #8A8AA0;

  /* Semantic (locked) */
  --gain: var(--mm-teal);
  --loss: var(--mm-red);
  --benchmark: var(--mm-muted);

  /* Type */
  --font-display: 'Chakra Petch', 'Rajdhani', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-data: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Radius / motion */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --t-fast: 120ms; --t-base: 180ms; --ease: cubic-bezier(.2,.8,.2,1);

  --glow-pink: 0 0 0 1px rgba(255,46,151,.4), 0 0 18px -4px rgba(255,46,151,.55);
  --glow-cyan: 0 0 0 1px rgba(0,240,255,.35), 0 0 18px -6px rgba(0,240,255,.4);
}

/* ---- Bootstrap remap (issue #66) ----------------------------------------
   Repoint the vendored grid/utilities at the brand. Bootstrap ships light
   defaults (--bs-primary #0d6efd, --bs-body-bg #fff), so anything left
   unmapped bleeds blue-on-white through classes like .bg-primary or .border.

   Colour utilities resolve through the "-rgb" TRIPLETS, not the hex vars —
   .text-primary is rgba(var(--bs-primary-rgb), …) — so each colour is mapped
   twice. CSS cannot derive a triplet from a hex var, hence the literals; the
   comment on each line is its --mm-* source, and test_theme_tokens.py fails the
   build if the two ever drift apart.

   This block must stay in sync with the equivalent one in home.html, which
   carries its own tokens and does not load this file. */
:root {
  --bs-body-bg: var(--mm-void);
  --bs-body-bg-rgb: 10,10,15;              /* --mm-void   #0A0A0F */
  --bs-body-color: var(--mm-ghost);
  --bs-body-color-rgb: 232,232,240;        /* --mm-ghost  #E8E8F0 */
  --bs-emphasis-color: var(--mm-ghost);
  --bs-emphasis-color-rgb: 232,232,240;    /* --mm-ghost  #E8E8F0 */
  --bs-secondary-color: var(--mm-muted);
  --bs-secondary-color-rgb: 138,138,160;   /* --mm-muted  #8A8AA0 */
  --bs-secondary-bg: var(--mm-carbon);
  --bs-secondary-bg-rgb: 21,21,31;         /* --mm-carbon #15151F */
  --bs-tertiary-bg: var(--mm-steel);
  --bs-tertiary-bg-rgb: 35,35,47;          /* --mm-steel  #23232F */

  --bs-primary: var(--mm-pink);
  --bs-primary-rgb: 255,46,151;            /* --mm-pink   #FF2E97 */
  --bs-secondary: var(--mm-muted);
  --bs-secondary-rgb: 138,138,160;         /* --mm-muted  #8A8AA0 */
  --bs-success: var(--mm-teal);
  --bs-success-rgb: 25,227,194;            /* --mm-teal   #19E3C2 — gains */
  --bs-danger: var(--mm-red);
  --bs-danger-rgb: 255,59,71;              /* --mm-red    #FF3B47 — losses */
  --bs-warning: var(--mm-amber);
  --bs-warning-rgb: 255,176,32;            /* --mm-amber  #FFB020 */
  --bs-info: var(--mm-cyan);
  --bs-info-rgb: 0,240,255;                /* --mm-cyan   #00F0FF */
  --bs-light: var(--mm-ghost);
  --bs-light-rgb: 232,232,240;             /* --mm-ghost  #E8E8F0 */
  --bs-dark: var(--mm-carbon);
  --bs-dark-rgb: 21,21,31;                 /* --mm-carbon #15151F */

  --bs-link-color: var(--mm-cyan);
  --bs-link-color-rgb: 0,240,255;          /* --mm-cyan   #00F0FF */
  --bs-link-hover-color: var(--mm-pink-glow);
  --bs-link-hover-color-rgb: 255,110,199;  /* --mm-pink-glow #FF6EC7 */

  --bs-border-color: var(--mm-steel);
  --bs-border-width: 1px;
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-body-font-family: var(--font-ui);
  --bs-font-monospace: var(--font-data);

  /* Gutters match the existing 1rem grid gap, not Bootstrap's 1.5rem default. */
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--mm-void);
  color: var(--mm-ghost);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  margin: 0 0 .4em;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

.mono, .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.muted { color: var(--mm-muted); }
.gain { color: var(--gain); }
.loss { color: var(--loss); }
a { color: var(--mm-cyan); text-decoration: none; }
a:hover { color: var(--mm-pink-glow); }

/* --- The Live Wire (signature mark) --- */
.live-wire {
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--mm-pink), var(--mm-pink-glow) 40%, var(--mm-cyan));
  box-shadow: 0 0 12px -1px rgba(255,46,151,.7), 0 0 20px -2px rgba(0,240,255,.4);
  border: 0;
}

/* --- Surfaces / cards --- */
.card {
  background: var(--mm-carbon);
  border: 1px solid var(--mm-steel);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
}
.card.elevated { box-shadow: var(--glow-cyan); }
.card.live-top { position: relative; overflow: hidden; }
.card.live-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--mm-pink), var(--mm-cyan));
  box-shadow: 0 0 10px -1px rgba(255,46,151,.6);
}

/* --- Buttons --- */
.btn {
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem;
  padding: .6rem 1.1rem; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  background: var(--mm-steel); color: var(--mm-ghost);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--mm-pink); color: var(--mm-void); }
.btn-primary:hover { box-shadow: var(--glow-pink); background: var(--mm-pink-glow); }
.btn-secondary { background: transparent; border-color: var(--mm-cyan); color: var(--mm-cyan); }
.btn-secondary:hover { box-shadow: var(--glow-cyan); }
.btn-danger { background: var(--mm-red); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-ghost { background: transparent; border-color: var(--mm-steel); color: var(--mm-ghost); }
.btn-ghost:hover { border-color: var(--mm-cyan); color: var(--mm-cyan); }

/* sized chart container — generous default size, narrow margins, and the user can
   drag the bottom-right corner to resize the chart window (issue #19). The SVG
   fills the box, so resizing the box resizes the chart. */
.chart-box {
  position: relative;
  /* min()-clamped against the container, not fixed (issue #67): a flat
     min-width:320px is wider than a 320px phone's content box once the canvas and
     card padding are taken out, so the box overflowed its card and got clipped.
     max-width:100% also reins in the inline width the browser writes onto the
     element after a drag, which would otherwise survive a resize down to a phone. */
  max-width: min(960px, 100%);
  margin: 0 auto;
  height: 380px;
  min-width: min(320px, 100%);
  min-height: 220px;
  max-height: 760px;
  padding: .3rem;
  border: 1px solid var(--mm-steel);
  border-radius: var(--r-sm);
  resize: both;
  overflow: hidden;
}
.chart-box::after {
  content: "⌟ drag";
  position: absolute; right: 4px; bottom: 2px;
  font-size: .6rem; color: var(--mm-muted); font-family: var(--font-data);
  pointer-events: none; opacity: .6;
}
.chart-box svg { width: 100%; height: 100%; display: block; }

/* --- Focus (never removed) --- */
:focus-visible { outline: 2px solid var(--mm-pink); outline-offset: 2px; border-radius: var(--r-sm); }

/* --- Inputs --- */
input, select {
  font-family: var(--font-ui); font-size: .95rem;
  background: var(--mm-void); color: var(--mm-ghost);
  border: 1px solid var(--mm-steel); border-radius: var(--r-sm);
  padding: .55rem .7rem; width: 100%;
}
input:focus, select:focus { border-color: var(--mm-pink); }
label { display: block; font-size: .8rem; color: var(--mm-muted); margin: 0 0 .3rem; }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-data); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: var(--r-sm); border: 1px solid;
}
.badge-test { color: var(--mm-teal); border-color: var(--mm-teal); background: rgba(25,227,194,.08); }
.badge-live { color: var(--mm-pink); border-color: var(--mm-pink); background: rgba(255,46,151,.1); }
.badge-ai   { color: var(--mm-violet); border-color: var(--mm-violet); background: rgba(163,92,255,.1); }
.badge-warn { color: var(--mm-amber); border-color: var(--mm-amber); background: rgba(255,176,32,.1); }
.badge-flag { color: var(--mm-amber); border-color: rgba(255,176,32,.5); background: rgba(255,176,32,.08);
  text-transform: none; letter-spacing: 0; font-family: var(--font-ui); }

/* --- Pills / chips --- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mm-steel); border: 1px solid transparent;
  border-radius: 999px; padding: .3rem .7rem; font-size: .85rem; cursor: pointer;
}
.chip.active { border-color: var(--mm-pink); color: var(--mm-pink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--mm-steel); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}