/* ════════════════════════════════════════════════════════
   PIANO SUITE — ENHANCED DESIGN TOKENS
   Replaces css/tokens.css
   
   Changes vs original:
     • Stronger accent ramp (a1–a6) with higher saturation
     • Improved chart-specific custom properties
     • Better dark-mode contrast for text and borders
     • New --chart-* variables for chart canvas elements
   ════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg:           #f0f1f7;
  --surface:      #ffffff;
  --surface2:     #e8eaf4;
  --surface3:     #dde0f0;

  /* Borders — slightly stronger for readability */
  --border:       rgba(0,0,0,0.09);
  --border2:      rgba(0,0,0,0.16);

  /* Text — stronger contrast */
  --text:         #141428;
  --text2:        #4a4a68;
  --text3:        #8080a8;

  /* Accent ramp — vivid, electric */
  --a1:           #3300cc;
  --a2:           #0047e1;
  --a3:           #1565ff;
  --a4:           #00b0e8;
  --a5:           #00d8c0;
  --a6:           #00f09a;

  /* Semantic */
  --accent:       #0047e1;
  --accent-soft:  rgba(0,71,225,0.09);
  --accent-text:  #003ac8;
  --success:      #008a5e;
  --success-bg:   rgba(0,138,94,0.11);
  --warn:         #b86000;
  --warn-bg:      rgba(184,96,0,0.11);
  --danger:       #c8002a;
  --danger-bg:    rgba(200,0,42,0.10);

  /* ── Chart-specific palette ────────────────────────────────────────── */
  /* These are used by charts-enhanced.js and chart-wrap titles.
     Higher saturation / contrast than the UI chrome palette above. */
  --chart-blue:     #2979ff;
  --chart-teal:     #00e5c8;
  --chart-amber:    #ffab00;
  --chart-rose:     #ff4569;
  --chart-green:    #00e676;
  --chart-violet:   #d500f9;
  --chart-sky:      #40c4ff;
  --chart-lime:     #c6ff00;
  --chart-coral:    #ff6e40;
  --chart-lavender: #b388ff;

  /* Typography */
  --mono:    "SF Mono", "Cascadia Code", "Fira Code", "Consolas", "Liberation Mono", monospace;
  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

  /* Layout */
  --top:  52px;
  --side: 196px;

  /* Radii */
  --r:  8px;
  --rl: 12px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 20px rgba(0,71,225,0.17);

  /* Motion */
  --ease: cubic-bezier(0.4,0,0.2,1);
}

/* ── Dark Mode Overrides ─────────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg:           #090912;
  --surface:      #111120;
  --surface2:     #18182a;
  --surface3:     #20203a;

  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.13);

  --text:         #eeeeff;
  --text2:        #9090c0;
  --text3:        #505078;

  --a1:           #9966ff;
  --a2:           #5599ff;
  --a3:           #66aaff;
  --a4:           #00ccff;
  --a5:           #00eecc;
  --a6:           #00ff99;

  --accent:       #5599ff;
  --accent-soft:  rgba(85,153,255,0.13);
  --accent-text:  #88ccff;
  --success:      #00e68c;
  --success-bg:   rgba(0,230,140,0.13);
  --warn:         #ffcc00;
  --warn-bg:      rgba(255,204,0,0.13);
  --danger:       #ff4569;
  --danger-bg:    rgba(255,69,105,0.13);

  /* Chart palette is intentionally the same in dark mode —
     they're already high-saturation and render well on dark canvases. */

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.55);
  --shadow-glow:  0 0 24px rgba(85,153,255,0.22);
}

/* ── Typography role assignments ─────────────────────────────────────────── */

.landing-title,
.page-title,
.topbar-logo-name,
.landing-card-title,
.big-note,
.freq-big {
  font-family: var(--display);
}

.card-title,
.chart-title,
.metric .val,
.badge,
.status-bar,
table,
.range-val,
.btab,
.cell-input,
.cell-select,
#auth-input,
#auth-subtitle,
#auth-hint {
  font-family: var(--mono);
}

/* ── Chart wrap enhancements ──────────────────────────────────────────────── */

.chart-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
  transition: transform .2s var(--ease), border-color .18s, box-shadow .18s;
}

.chart-wrap:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border2);
}

/* Stronger chart title text */
.chart-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);           /* was text3 — now higher contrast */
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
  font-weight: 500;
}

[data-theme="dark"] .chart-title {
  color: rgba(200,210,255,0.70); /* warm blue-white for dark mode */
}

canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
}