/* tokens.css -- CSS custom properties, dark/light theme variables */
:root {
  /* Tell browser to render native UI (date/time pickers, scrollbars, form selections)
     in dark mode by default. Overridden under body.light below. */
  color-scheme: dark;
  /* Use our brand green for native form-control accents (selection highlights, focus rings). */
  accent-color: var(--green);
  --bg-base: #0d0d0d; --bg-sidebar: #111111; --bg-surface: #1a1a1a; --bg-elevated: #222222;
  --border: rgba(255,255,255,0.07); --border-sub: rgba(255,255,255,0.04);
  --text-primary: #f0f0f0; --text-secondary: #c8cbd1; --text-muted: #9ca3af; --text-faint: #9ca3af; --text-ph: #52576a;
  --green: #4ade80; --green-bg: #052e16; --green-tint: rgba(74,222,128,0.12); --red: #f87171; --red-bg: #2d0a0a; --orange: #f59e0b; --orange-bg: rgba(245,158,11,0.12);
  --today: #ff8c00;
  --btn-primary-bg: #166534; --btn-primary-hover: #15803d; --btn-primary-border: #16a34a; --btn-primary-text-hover: #86efac;
  --sidebar-w: 14rem; --r: 0.375rem; --rm: 0.2rem;
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.2); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --chart-grid: rgba(255,255,255,0.06); --tooltip-bg: var(--bg-surface); --tooltip-border: var(--border); --tooltip-body: var(--text-secondary);
  --green-accent: var(--green); --red-accent: var(--red); --green-pill-bg: rgba(22,163,74,0.2); --red-pill-bg: rgba(220,38,38,0.2);
  --widget-gap: 2px;
  --input-bg: var(--bg-base); --input-bg-disabled: var(--bg-surface); --input-border: var(--border); --input-border-focus: var(--green); --input-text: var(--text-primary); --input-placeholder: var(--text-ph);
}

/* ── Light theme (Slate Blue) ──────────────────────────────────────── */
body.light {
  color-scheme: light;
  --bg-base: #e3e7ed; --bg-sidebar: #d8dee6; --bg-surface: #d8dee6; --bg-elevated: #ccd3dd;
  --border: #b5bfcc; --border-sub: rgba(0,0,0,0.05);
  --text-primary: #111827; --text-secondary: #374151; --text-muted: #4f5d6e; --text-faint: #5f6d7e; --text-ph: #8b95a3;
  --green: #15803d; --green-bg: rgba(21,128,61,0.12); --green-tint: rgba(22,163,74,0.12); --red: #b91c1c; --red-bg: rgba(185,28,28,0.12); --orange: #b45309; --orange-bg: rgba(180,83,9,0.12);
  --today: #ff8c00;
  --green-pill-bg: rgba(21,128,61,0.15); --red-pill-bg: rgba(153,27,27,0.15);
  --chart-grid: #b5bfcc;
}
body.light .nav-item.active { color: var(--text-primary); }
body.light .tag-chip.selected { border-color: rgba(0,0,0,0.2); }
body.light .tag-pill[data-cat="Setup"], body.light .tag-chip[data-cat="Setup"] { background: #dbeafe; color: #1e40af; }
body.light .tag-pill[data-cat="Emotion"], body.light .tag-chip[data-cat="Emotion"] { background: #ede9fe; color: #6d28d9; }
body.light .tag-pill[data-cat="Mistake"], body.light .tag-chip[data-cat="Mistake"] { background: #fee2e2; color: #991b1b; }
body.light .tag-pill[data-cat="Risk"], body.light .tag-chip[data-cat="Risk"] { background: #fef3c7; color: #92400e; }
body.light .tag-pill[data-cat="Confidence"], body.light .tag-chip[data-cat="Confidence"] { background: #ede9fe; color: #5b21b6; }
body.light .tag-pill[data-cat="Lesson"], body.light .tag-chip[data-cat="Lesson"] { background: #ccfbf1; color: #115e59; }
body.light .tag-pill[data-cat="Custom"], body.light .tag-chip[data-cat="Custom"] { background: #e5e7eb; color: #374151; }
body.light .tag-pill[data-cat="Market Condition"], body.light .tag-chip[data-cat="Market Condition"] { background: #e0f2fe; color: #075985; }
body.light .tag-pill[data-cat="Entry Signal"], body.light .tag-chip[data-cat="Entry Signal"] { background: #fef9c3; color: #713f12; }
body.light .tag-pill[data-cat="Execution Rule"], body.light .tag-chip[data-cat="Execution Rule"] { background: #fce7f3; color: #9d174d; }
body.light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.15); }