/**
 * Design tokens — IC_UI_Design_System_Blueprint.md
 * Single source of truth for fonts, colors, scrollbars, buttons. Use everywhere.
 * Colors: Marcus persona only (persona_color_system.html). No color-mix; use rgba alphas.
 * Fonts: bundled via @fontsource (SIL OFL) — no Google Fonts CDN in desktop builds.
 */
@import '@fontsource/montserrat/latin-400.css';
@import '@fontsource/montserrat/latin-500.css';
@import '@fontsource/montserrat/latin-600.css';
@import '@fontsource/montserrat/latin-700.css';
@import '@fontsource/jetbrains-mono/latin-400.css';
@import '@fontsource/jetbrains-mono/latin-500.css';

:root {
  /* Typography: IC_UI_Design_System_Blueprint — Interface: Montserrat; Numerical/price: JetBrains Mono */
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* ── Marcus source palette (7 hex — do not add other persona hexes) ── */
  --marcus-black:    #0A0A0A;
  --marcus-slate:    #2C3E50;
  --marcus-gold:     #C9A84C;
  --marcus-salmon:   #F08030;
  --marcus-burgundy: #8B1A1A;
  --marcus-fairway:  #6B8E6B;
  --marcus-cashmere: #D6CDB8;

  /* RGB tuples for JS inline rgba() only */
  --marcus-black-rgb:    10, 10, 10;
  --marcus-slate-rgb:    44, 62, 80;
  --marcus-gold-rgb:     201, 168, 76;
  --marcus-salmon-rgb:   240, 128, 48;
  --marcus-burgundy-rgb: 139, 26, 26;
  --marcus-fairway-rgb:  107, 142, 107;
  --marcus-cashmere-rgb: 214, 205, 184;

  /* ── Marcus alpha ladder (transparency only — no color-mix) ── */
  --marcus-cashmere-a02: rgba(214, 205, 184, 0.02);
  --marcus-cashmere-a03: rgba(214, 205, 184, 0.03);
  --marcus-cashmere-a08: rgba(214, 205, 184, 0.08);
  --marcus-cashmere-a10: rgba(214, 205, 184, 0.10);
  --marcus-cashmere-a15: rgba(214, 205, 184, 0.15);
  --marcus-cashmere-a20: rgba(214, 205, 184, 0.20);
  --marcus-cashmere-a25: rgba(214, 205, 184, 0.25);
  --marcus-cashmere-a36: rgba(214, 205, 184, 0.36);
  --marcus-cashmere-a40: rgba(214, 205, 184, 0.40);
  --marcus-cashmere-a62: rgba(214, 205, 184, 0.62);
  --marcus-cashmere-a92: rgba(214, 205, 184, 0.92);

  --marcus-gold-a10: rgba(201, 168, 76, 0.10);
  --marcus-gold-a12: rgba(201, 168, 76, 0.12);
  --marcus-gold-a15: rgba(201, 168, 76, 0.15);
  --marcus-gold-a20: rgba(201, 168, 76, 0.20);
  --marcus-gold-a25: rgba(201, 168, 76, 0.25);
  --marcus-gold-a30: rgba(201, 168, 76, 0.30);
  --marcus-gold-a35: rgba(201, 168, 76, 0.35);
  --marcus-gold-a45: rgba(201, 168, 76, 0.45);
  --marcus-gold-a50: rgba(201, 168, 76, 0.50);
  --marcus-gold-a60: rgba(201, 168, 76, 0.60);
  --marcus-gold-a75: rgba(201, 168, 76, 0.75);

  --marcus-fairway-a08: rgba(107, 142, 107, 0.08);
  --marcus-fairway-a12: rgba(107, 142, 107, 0.12);
  --marcus-fairway-a20: rgba(107, 142, 107, 0.20);
  --marcus-fairway-a30: rgba(107, 142, 107, 0.30);
  --marcus-fairway-a82: rgba(107, 142, 107, 0.82);

  --marcus-salmon-a10: rgba(240, 128, 48, 0.10);
  --marcus-salmon-a15: rgba(240, 128, 48, 0.15);

  --marcus-slate-a85: rgba(44, 62, 80, 0.85);

  --marcus-black-a35: rgba(10, 10, 10, 0.35);
  --marcus-black-a45: rgba(10, 10, 10, 0.45);
  --marcus-black-a70: rgba(10, 10, 10, 0.70);
  --marcus-black-a80: rgba(10, 10, 10, 0.80);

  --marcus-burgundy-a08: rgba(139, 26, 26, 0.08);
  --marcus-burgundy-a10: rgba(139, 26, 26, 0.10);
  --marcus-burgundy-a15: rgba(139, 26, 26, 0.15);

  /* Legacy alias used by chart/S/R */
  --marcus-ghost: var(--marcus-slate);

  /* Core semantics — terminal black = primary canvas (Konsole grid, macro panel, chart bg) */
  --color-terminal: var(--marcus-black);
  --color-bg: var(--color-terminal);
  --color-border: var(--marcus-slate);
  --color-text: var(--marcus-cashmere);
  --color-text-muted: var(--marcus-cashmere-a40);
  --color-text-label: var(--marcus-slate);
  --color-accent: var(--marcus-gold);
  --color-success: var(--marcus-fairway);
  --color-warn: var(--marcus-salmon);
  --color-danger: var(--marcus-burgundy);
  --color-panel: var(--marcus-slate);
  --color-surface-elevated: var(--marcus-slate);
  --color-timeframe-menu: var(--color-accent);
  --color-white: var(--marcus-cashmere);
  --color-timeframe-menu-hover: var(--marcus-gold-a15);
  --color-timeframe-menu-active: var(--marcus-gold-a25);
  --color-timeframe-menu-edit-hover: var(--marcus-gold-a20);
  --color-timeframe-menu-add-hover: var(--marcus-gold-a10);
  --color-overlay-dark: var(--marcus-black-a70);
  --color-accent-subtle: var(--marcus-gold-a12);
  --color-success-subtle: var(--marcus-fairway-a12);

  /* VPI tier labels (text-only) */
  --color-vpi-tier-a: var(--marcus-cashmere);
  --color-vpi-tier-b: var(--marcus-cashmere);
  --color-vpi-tier-c: var(--marcus-cashmere-a40);

  /* IC Konsole — funding vs regime */
  --color-vpi-funding-positive: var(--marcus-salmon);
  --color-vpi-funding-negative: var(--marcus-fairway);
  --color-vpi-regime-bull: var(--marcus-fairway);
  --color-vpi-regime-bear: var(--marcus-burgundy);
  --color-vpi-regime-flat: var(--marcus-cashmere-a40);

  --shadow-panel: 0 8px 24px var(--marcus-black-a70);
  --shadow-dropdown: 0 4px 12px var(--marcus-black-a45);

  /* Charts (KLineChart v10) */
  --chart-bg: var(--color-bg);
  --chart-grid: var(--marcus-cashmere-a08);
  /* Pane separator (break line between main chart and sub-indicator panes).
     Deliberately more visible than the grid so pane boundaries stay clear. */
  --chart-separator: var(--marcus-slate);
  --chart-text: var(--color-text);
  --chart-text-muted: var(--color-text-muted);
  --chart-crosshair: var(--marcus-slate);
  --chart-candle-up: var(--marcus-fairway);
  --chart-candle-down: var(--marcus-burgundy);
  --chart-candle-nochange: var(--color-text-muted);
  --chart-priceMark-last-line: var(--marcus-ghost);
  --chart-priceMark-last-text: var(--marcus-gold);
  --chart-priceMark-last-bg: var(--marcus-black);
  --chart-priceMark-last-border: var(--marcus-slate);
  --chart-priceMark-last: var(--marcus-ghost);
  --chart-crosshair-label-text: var(--marcus-cashmere);
  --chart-crosshair-label-bg: transparent;
  --chart-crosshair-label-border: transparent;

  /* Indicator series — Marcus only */
  --chart-indicator-up: var(--marcus-fairway);
  --chart-indicator-down: var(--marcus-burgundy);
  --chart-indicator-neutral: var(--marcus-cashmere-a40);
  --chart-indicator-accent: var(--marcus-gold);
  --chart-indicator-contrast: var(--marcus-cashmere);
  --chart-indicator-panel: var(--color-panel);
  --chart-indicator-series-1: var(--marcus-slate);
  --chart-indicator-series-2: var(--marcus-burgundy);
  --chart-indicator-series-3: var(--marcus-gold);
  --chart-indicator-series-4: var(--marcus-fairway);
  --chart-indicator-series-5: var(--marcus-cashmere);
  --chart-indicator-series-6: var(--marcus-slate);
  --chart-indicator-highlight: var(--marcus-cashmere);
  --chart-indicator-warn: var(--marcus-salmon);
  --chart-indicator-strong-bear: var(--marcus-burgundy);

  /* Konsole heatmap washes (RVOL / Vol) */
  --vpid-heatmap-rvol-20: var(--marcus-gold-a12);
  --vpid-heatmap-rvol-40: var(--marcus-gold-a25);
  --vpid-heatmap-rvol-60: var(--marcus-gold-a45);
  --vpid-heatmap-rvol-80: var(--marcus-gold-a60);
  --vpid-heatmap-rvol-100: var(--marcus-gold-a75);
  --vpid-heatmap-vol-3: var(--marcus-gold-a30);
  --vpid-heatmap-vol-4: var(--marcus-gold-a60);

  /* Bars / inputs */
  --input-height: 36px;
  --input-border: 1px solid var(--color-border);
  --input-radius: 6px;
  --input-padding: 0 12px;
  --radius-sm: 4px;
  --icon-size-sm: 18px;
  --icon-size-lg: 40px;

  /* Spacing (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Sidebar — responsive, resizable */
  --sidebar-width: 280px;
  --sidebar-min-width: 200px;
  --sidebar-max-width: 480px;
  --sidebar-bg: var(--color-bg);
  --sidebar-border: var(--color-border);

  /* Scrollbar */
  --scrollbar-width: 10px;
  --scrollbar-track: var(--marcus-black);
  --scrollbar-thumb: var(--marcus-slate);
  --scrollbar-thumb-hover: var(--marcus-slate-a85);
  --scrollbar-radius: 6px;

  /* IC Konsole toolbar */
  --konsole-toolbar-bg: var(--color-panel);
  --konsole-toolbar-border: var(--color-border);
  --konsole-toolbar-padding-y: var(--space-5);
  --konsole-toolbar-padding-x: var(--space-5);
  --konsole-toolbar-gap: clamp(var(--space-1), 1.75%, var(--space-3));
  --konsole-control-group-gap: var(--space-3);
  --konsole-toolbar-label-gap: var(--space-1);
  --konsole-toolbar-block-height: 36px;
  --konsole-grid-row-height: var(--konsole-toolbar-block-height);
  --konsole-label-font-size: 10px;
  --konsole-label-letter-spacing: 0.1em;
  --konsole-label-color: var(--color-text-muted);
  --konsole-mcap-slider-max-width: clamp(var(--sidebar-min-width), 40vw, var(--sidebar-width));
  --konsole-col-tier-min: 8ch;
  --konsole-col-asset-min: 12ch;
  --konsole-col-p-min: 7ch;
  --konsole-col-dp-min: 7ch;
  --konsole-col-vol-min: 7ch;
  --konsole-col-oi-min: 8ch;
  --konsole-col-fr-min: 10ch;
  --konsole-col-rpct-min: 11ch;
  --konsole-col-beta-min: 9ch;
  --konsole-col-firstseen-min: 10ch;
  --konsole-col-lastseen-min: 8ch;
  --konsole-col-funding-min: clamp(22ch, 28vw, 36ch);
  --konsole-col-regime-min: 11ch;
  --konsole-table-min-width: calc(
    var(--konsole-col-tier-min) + var(--konsole-col-asset-min) + var(--konsole-col-p-min) +
      var(--konsole-col-dp-min) + var(--konsole-col-rpct-min) + var(--konsole-col-beta-min) +
      var(--konsole-col-firstseen-min) + var(--konsole-col-lastseen-min) + var(--konsole-col-funding-min) +
      var(--konsole-col-regime-min)
  );
  --konsole-tier-padding-x: var(--space-3);
  --konsole-tier-padding-y: var(--space-1);
  --konsole-tier-font-size: 11px;
  --konsole-bank-holiday-min-height: var(--konsole-toolbar-block-height);
  --konsole-bank-holiday-font-size: 9px;
  --konsole-bank-holiday-letter-spacing: 0.05rem;
  --konsole-table-header-bg: var(--marcus-cashmere-a02);
  --konsole-table-row-divider: var(--marcus-cashmere-a03);
  --konsole-tier-btn-bg: var(--marcus-cashmere-a03);
  --konsole-tier-btn-bg-active: var(--marcus-gold-a10);
  --konsole-bank-holiday-field-bg: var(--marcus-black-a80);

  /* IC Konsole header tooltips */
  --konsole-tooltip-bg: var(--marcus-slate);
  --konsole-tooltip-color: var(--marcus-cashmere);
  --konsole-tooltip-heading-color: var(--marcus-gold);
  --konsole-tooltip-border: 1px solid var(--marcus-gold-a35);
  --konsole-tooltip-radius: var(--input-radius);
  --konsole-tooltip-padding: var(--space-3) var(--space-4);
  --konsole-tooltip-shadow: 0 4px 20px var(--marcus-black-a45);
  --konsole-tooltip-max-width: min(22rem, 90vw);
  --konsole-tooltip-z-index: 50;
  --konsole-tooltip-delay-ms: 700;
  --konsole-tooltip-drop: 0 4px 12px var(--marcus-black-a45);
  --konsole-tooltip-shadow-drop: var(--konsole-tooltip-drop);

  /* IC Konsole BTC/ETH macro regime */
  --konsole-trend-bull: var(--marcus-fairway);
  --konsole-trend-bear: var(--marcus-burgundy);
  --konsole-trend-overlap: var(--marcus-salmon);
  --konsole-energy-compression: var(--marcus-cashmere-a40);
  --konsole-energy-expansion: var(--marcus-fairway);
  --konsole-energy-exhaustion: var(--marcus-salmon);
  --konsole-energy-exhaustion-blue: #5b9cf6;
  --konsole-energy-trend-break: var(--marcus-burgundy);
  /* Wave surface since last EMA200 cross (side at crossover, not trend matrix) */
  --konsole-wave-surface-bull: var(--marcus-fairway);
  --konsole-wave-surface-bear: var(--marcus-burgundy);

  /* Universal range input (.ic-range) */
  --ic-range-track-height: 4px;
  --ic-range-track-radius: 2px;
  --ic-range-track-bg: var(--marcus-cashmere-a10);
  --ic-range-thumb-size: 14px;
  --ic-range-thumb-bg: var(--marcus-gold);
  --ic-range-thumb-shadow: 0 0 10px var(--marcus-gold-a30);
  --ic-range-thumb-offset: -5px;
  --ic-range-tick-color: var(--marcus-gold);
}

/* Scrollbar: apply design-system styling to all scrollable areas (Electron/Chromium) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

* {
  font-family: var(--font-family);
}
html, body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}
input, button, select, textarea {
  font-size: var(--font-size-base);
}

input:not([type='range']),
select,
textarea {
  min-height: var(--input-height);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
}

input[type='range'] {
  min-height: unset;
  border: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}