/* ============================================================
   IB THEME — design tokens (extracted from UI kit)
   data-scheme = indigo | emerald | amber
   data-theme  = light | dark
   ============================================================ */
:root {
  /* neutrals */
  --ink:        #0B1220;
  --ink-2:      #475569;
  --ink-3:      #94A3B8;
  --bg:         #FFFFFF;
  --surface:    #F8FAFC;
  --surface-2: #F1F5F9;
  --line:       #E2E8F0;
  --line-2:     #CBD5E1;

  /* brand (default indigo) */
  --brand:      #4F46E5;
  --brand-dark: #4338CA;
  --brand-tint: color-mix(in srgb, var(--brand) 9%,  var(--bg));
  --brand-soft: color-mix(in srgb, var(--brand) 16%, var(--bg));
  --on-brand:   #FFFFFF;

  /* trading semantics */
  --up:    #059669;
  --up-bg: color-mix(in srgb, #059669 11%, var(--bg));
  --down:    #DC2626;
  --down-bg: color-mix(in srgb, #DC2626 10%, var(--bg));
  --warn:    #D97706;
  --warn-bg: color-mix(in srgb, #D97706 12%, var(--bg));

  /* fonts */
  --f-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-rtl:  "Vazirmatn", Tahoma, sans-serif;

  /* radii — sharper, platform feel */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.05);
  --shadow-md: 0 4px 12px rgba(11,18,32,.08);
}

[data-scheme="indigo"]  { --brand: #4F46E5; --brand-dark: #4338CA; }
[data-scheme="emerald"] { --brand: #059669; --brand-dark: #047857; }
[data-scheme="amber"]   { --brand: #D97706; --brand-dark: #B45309; }

/* Dark mode = trading-terminal feel (very dark, near-black) */
[data-theme="dark"] {
  --ink:       #F1F5F9;
  --ink-2:     #94A3B8;
  --ink-3:     #64748B;
  --bg:        #0A0B12;
  --surface:   #12141C;
  --surface-2: #1A1D28;
  --line:      #262A36;
  --line-2:    #3A3F4F;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
}
[data-theme="dark"][data-scheme="indigo"]  { --brand: #818CF8; --brand-dark: #6366F1; }
[data-theme="dark"][data-scheme="emerald"] { --brand: #34D399; --brand-dark: #10B981; }
[data-theme="dark"][data-scheme="amber"]   { --brand: #FBBF24; --brand-dark: #F59E0B; }
[data-theme="dark"] { --on-brand: #0A0B12; }