/**
 * Design tokens — copy of frontend-v10/design-tokens.css (sync manually when app changes).
 * product-demo only. Fonts load via Google Fonts in index.html (no local fonts/ folder).
 */
: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;

  /* ── Persona source palettes (persona_color_system.html) ── */
  /* Marcus — primary product theme */
  --marcus-black:    #0A0A0A;
  --marcus-slate:    #2C3E50;
  --marcus-gold:     #C9A84C;
  --marcus-salmon:   #F08030;
  --marcus-burgundy: #8B1A1A;
  --marcus-fairway:  #6B8E6B;
  --marcus-cashmere: #D6CDB8;
  /* Elena — partial (Konsole labels, structural accent) */
  --elena-black:  #1A1A1A;
  --elena-blue:   #1E5C8A;
  --elena-green:  #5A8F5A;
  --elena-orange: #D45A20;
  --elena-purple: #7B3F8A;
  --elena-red:    #A02030;
  --elena-white:  #E8F0E8;

  /* Core semantics — Marcus primary; derived mixes only from persona hexes */
  --color-bg: var(--marcus-black);
  --color-border: color-mix(in srgb, var(--marcus-cashmere) 8%, transparent);
  --color-text: var(--marcus-cashmere);
  --color-text-muted: color-mix(in srgb, var(--marcus-cashmere) 40%, transparent);
  /* Konsole / micro column labels (Marcus Zürich slate) */
  --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: color-mix(in srgb, var(--marcus-gold) 15%, transparent);
  --color-timeframe-menu-active: color-mix(in srgb, var(--marcus-gold) 25%, transparent);
  --color-timeframe-menu-edit-hover: color-mix(in srgb, var(--marcus-gold) 20%, transparent);
  --color-timeframe-menu-add-hover: color-mix(in srgb, var(--marcus-gold) 10%, transparent);
  --color-overlay-dark: color-mix(in srgb, var(--marcus-black) 70%, transparent);
  --color-accent-subtle: color-mix(in srgb, var(--marcus-gold) 12%, transparent);
  --color-success-subtle: color-mix(in srgb, var(--marcus-fairway) 12%, transparent);
  --marcus-ghost: color-mix(in srgb, var(--marcus-cashmere) 15%, transparent);

  /* S/R swing pivot lines — per-TF Marcus ghost */
  --sr-line-1d: color-mix(in srgb, var(--marcus-gold) 18%, transparent);
  --sr-line-4h: color-mix(in srgb, var(--marcus-salmon) 15%, transparent);
  --sr-line-1h: var(--marcus-ghost);

  /* VPI tier labels (text-only; A+ red, B+ amber, C+ light blue — IC reference) */
  --color-vpi-tier-a: var(--marcus-gold);
  --color-vpi-tier-b: var(--marcus-salmon);
  --color-vpi-tier-c: color-mix(in srgb, var(--marcus-cashmere) 40%, transparent);

  /* IC Konsole — funding vs regime (distinct semantics; plan §5) */
  --color-vpi-funding-positive: var(--chart-indicator-warn);
  --color-vpi-funding-negative: var(--chart-indicator-up);
  --color-vpi-regime-bull: var(--chart-indicator-up);
  --color-vpi-regime-bear: var(--chart-indicator-strong-bear);
  --color-vpi-regime-flat: var(--chart-indicator-neutral);

  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Charts (KLineChart v10) */
  --chart-bg: var(--color-bg);
  --chart-grid: var(--color-border);
  --chart-text: var(--color-text);
  --chart-text-muted: var(--color-text-muted);
  --chart-crosshair: color-mix(in srgb, var(--marcus-cashmere) 20%, transparent);
  --chart-candle-up: var(--color-success);
  --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 — semantic; resolve in JS via getComputedStyle for canvas (klinecharts) */
  --chart-indicator-up: var(--chart-candle-up);
  --chart-indicator-down: var(--chart-candle-down);
  --chart-indicator-neutral: var(--color-text-muted);
  --chart-indicator-accent: var(--color-accent);
  --chart-indicator-contrast: var(--marcus-cashmere);
  --chart-indicator-panel: var(--color-panel);
  --chart-indicator-series-1: var(--marcus-ghost);
  --chart-indicator-series-2: var(--elena-blue);
  --chart-indicator-series-3: var(--marcus-cashmere);
  --chart-indicator-series-4: var(--marcus-gold);
  --chart-indicator-series-5: var(--marcus-fairway);
  --chart-indicator-series-6: var(--marcus-burgundy);
  /* WTWS / accents (cyan-like, pink-like) — aligned to palette, not neon hex */
  --chart-indicator-highlight: var(--marcus-cashmere);
  --chart-indicator-warn: var(--marcus-salmon);
  --chart-indicator-strong-bear: var(--marcus-burgundy);

  /* 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 — IC_UI_Design_System_Blueprint: same everywhere */
  --scrollbar-width: 10px;
  --scrollbar-track: var(--marcus-black);
  --scrollbar-thumb: var(--marcus-slate);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--marcus-slate) 75%, var(--marcus-cashmere));
  --scrollbar-radius: 6px;

  /* (Persona palettes defined above under Core semantics) */

  /* IC Konsole toolbar (semantic; layout/spacing from reference terminal-header) */
  --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);
  /* % of toolbar width, capped small — keeps Konsole banner compact */
  --konsole-toolbar-gap: clamp(var(--space-1), 1.75%, var(--space-3));
  --konsole-control-group-gap: var(--space-3);
  /* Label → control spacing inside each toolbar column (tight; not --konsole-control-group-gap) */
  --konsole-toolbar-label-gap: var(--space-1);
  /* One height: mcap block (track+ticks) | tier buttons | bank field (Gemini holiday-box 32px + room for ticks) */
  --konsole-toolbar-block-height: 36px;
  /* IC Konsole table: data, filter, and header rows share this height */
  --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);
  /* Mcap slider: shrinks on narrow webviews; cap at sidebar width on large */
  --konsole-mcap-slider-max-width: clamp(var(--sidebar-min-width), 40vw, var(--sidebar-width));
  /* Option A: table min width = sum of column ch floors (horizontal scroll below this) */
  --konsole-col-tier-min: 8ch;
  --konsole-col-asset-min: 12ch;
  --konsole-col-p-min: 5ch;
  --konsole-col-dp-min: 5ch;
  --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: color-mix(in srgb, var(--marcus-cashmere) 2%, transparent);
  --konsole-table-row-divider: color-mix(in srgb, var(--marcus-cashmere) 3%, transparent);
  --konsole-tier-btn-bg: color-mix(in srgb, var(--marcus-cashmere) 3%, transparent);
  --konsole-tier-btn-bg-active: color-mix(in srgb, var(--marcus-gold) 10%, transparent);
  --konsole-bank-holiday-field-bg: color-mix(in srgb, var(--marcus-black) 80%, transparent);

  /* IC Konsole header tooltips (floating panel; component CSS uses these only) */
  --konsole-tooltip-bg: var(--marcus-slate);
  --konsole-tooltip-color: var(--marcus-cashmere);
  --konsole-tooltip-heading-color: var(--marcus-gold);
  --konsole-tooltip-border: 1px solid color-mix(in srgb, var(--marcus-gold) 35%, transparent);
  --konsole-tooltip-radius: var(--input-radius);
  --konsole-tooltip-padding: var(--space-3) var(--space-4);
  --konsole-tooltip-shadow: 0 4px 20px color-mix(in srgb, var(--marcus-black) 45%, transparent);
  --konsole-tooltip-max-width: min(22rem, 90vw);
  --konsole-tooltip-z-index: 50;

  /**
   * Universal range input (.ic-range) — reuse on any page.
   * Track: --ic-range-track-bg, height --ic-range-track-height, radius --ic-range-track-radius
   * Thumb: --ic-range-thumb-bg, size --ic-range-thumb-size, shadow --ic-range-thumb-shadow
   * Ticks (optional sibling UI): --ic-range-tick-color
   */
  --ic-range-track-height: 4px;
  --ic-range-track-radius: 2px;
  --ic-range-track-bg: color-mix(in srgb, var(--marcus-cashmere) 10%, transparent);
  --ic-range-thumb-size: 14px;
  --ic-range-thumb-bg: var(--marcus-gold);
  --ic-range-thumb-shadow: 0 0 10px color-mix(in srgb, var(--marcus-gold) 30%, transparent);
  --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);
}

/* Step 1.2: Global font — IC_UI_Design_System_Blueprint, entire app */
* {
  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);
}

/* Step 2.3: Global inputs — tokens only; buttons use tokens per component */
input:not([type='range']),
select,
textarea {
  min-height: var(--input-height);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
}

/* Range is styled per component (.ic-range); do not apply text-input chrome */
input[type='range'] {
  min-height: unset;
  border: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}