/* ============================================================
   W&M Quant — Shared visual design system
   ------------------------------------------------------------
   Canonical source for the palette, type, and component patterns
   used across all 6 member tools. Standardized on Learning Hub's
   (learn.html) look — dark "trading terminal" base with gold
   accents, which already balanced approachability with the
   terminal feel and had solid gamification UI worth keeping as
   the template.

   This file is the reference + a small set of reusable utility
   classes for NEW markup. Each existing tool page keeps its own
   CSS variable NAMES (so hundreds of existing rules don't need
   touching) but its :root values are repointed to these tokens.
   Treat the --wm-* variables below as the single source of truth
   when a page's palette needs to change.
   ============================================================ */

:root {
  /* Surfaces */
  --wm-navy:     #1A1A2E; /* page background */
  --wm-navy2:    #16213E; /* recessed/inset surface (inputs, sidebar, nav) */
  --wm-card:     #1E2A45; /* card / panel surface */
  --wm-blue:     #0F3460; /* accent panel bg, active states */
  --wm-border:   #2A3A5C;

  /* Text */
  --wm-white:    #FFFFFF; /* primary text */
  --wm-offwhite: #F5F6FA; /* secondary text, slightly softer than white */
  --wm-muted:    #8892A4; /* tertiary / label text */

  /* Accent */
  --wm-gold:     #E2B04A; /* primary accent — buttons, highlights, active tab */
  --wm-gold2:    #F5C842; /* gold gradient partner / hover */

  /* Semantic */
  --wm-green:    #27AE60;
  --wm-red:      #E74C3C;

  /* Shape */
  --wm-radius:   12px;
  --wm-radius-lg:20px;
  --wm-font:     'Segoe UI', system-ui, sans-serif;
  --wm-font-mono: 'Consolas', 'SF Mono', ui-monospace, monospace;
}

/* Optional utility classes for any NEW markup (tooltips, glossary
   chips in phase 3, etc.) — existing pages are not required to
   adopt these class names, just the token values above. */
.wm-theme-base { background: var(--wm-navy); color: var(--wm-white); font-family: var(--wm-font); }

.wm-card {
  background: var(--wm-card);
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius);
  padding: 20px;
}

.wm-btn-primary {
  background: var(--wm-gold);
  color: var(--wm-navy);
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
}
.wm-btn-primary:hover { opacity: .88; }

.wm-btn-outline {
  background: transparent;
  border: 1px solid var(--wm-border);
  color: var(--wm-white);
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all .2s;
}
.wm-btn-outline:hover { border-color: var(--wm-gold); color: var(--wm-gold); }

.wm-input {
  background: var(--wm-navy2);
  border: 1px solid var(--wm-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--wm-white);
  font-family: inherit;
  outline: none;
}
.wm-input:focus { border-color: var(--wm-gold); }

.wm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.wm-badge-green { background: rgba(39,174,96,.15); color: var(--wm-green); }
.wm-badge-red   { background: rgba(231,76,60,.15); color: var(--wm-red); }
.wm-badge-gold  { background: rgba(226,176,74,.15); color: var(--wm-gold); }

.wm-progress { height: 3px; background: var(--wm-border); border-radius: 2px; }
.wm-progress-fill { height: 100%; background: var(--wm-gold); border-radius: 2px; transition: width .5s; }