/* /ftf/styles/theme.css
   FTF theme tokens. Dark values preserve the current live theme. */

:root {
  color-scheme: dark;

  /* Chart Lab - 2D price line + area fill (read by chart-lab.js canvas) */
  --chart-line: #86efac;
  --chart-line-fill-top: rgba(134,239,172,0.32);
  --chart-line-fill-bottom: rgba(134,239,172,0);

  /* Backgrounds */
  --bg-app: #0a0a0a;
  --bg-deep: #050505;
  --bg-panel: #0f0f0f;
  --bg-input: #111;
  --bg-hover: #161616;
  --bg-elevated: #181818;
  --bg-sidebar: #080808;
  --bg-modal-panel: #0d0d0d;

  /* Text */
  --text-primary: #e8e8e8;
  --text-heading: #fafafa;
  --text-strong: #ffffff;
  --text-body: #d4d4d4;
  --text-muted: #888;
  --text-muted-strong: #666;
  --text-disabled: #555;
  --text-subtle: #444;
  --text-soft: #ccc;
  --text-on-dark: #fff;
  --text-on-dark-full: #ffffff;
  --text-on-accent: #fff;
  --text-alpha-95: rgba(255, 255, 255, 0.95);
  --text-alpha-90: rgba(255, 255, 255, 0.9);
  --text-alpha-85: rgba(255, 255, 255, 0.85);
  --text-alpha-78: rgba(255, 255, 255, 0.78);
  --text-alpha-70: rgba(255, 255, 255, 0.7);
  --text-alpha-55: rgba(255, 255, 255, 0.55);
  --text-alpha-45: rgba(255, 255, 255, 0.45);
  --text-alpha-35: rgba(255, 255, 255, 0.35);
  --text-alpha-25: rgba(255, 255, 255, 0.25);
  --text-inverse: #061018;

  /* Borders */
  --border: #1f1f1f;
  --border-subtle: #1a1a1a;
  --border-strong: #2a2a2a;
  --border-hover: #3a3a3a;
  --border-input: #222;

  /* Accent / brand */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-muted: rgba(59, 130, 246, 0.12);
  --accent-muted-10: rgba(59, 130, 246, 0.1);
  --accent-muted-15: rgba(59, 130, 246, 0.15);
  --accent-muted-35: rgba(59, 130, 246, 0.35);

  /* States */
  --success: #10b981;
  --success-action: #22c55e;
  --active: #4ade80;
  --warning: #f59e0b;
  --warning-bright: #facc15;
  --danger: #ef4444;
  --danger-text: #fca5a5;
  --danger-market: #f87171;
  --info: #60a5fa;
  --info-strong: #7dd3fc;

  /* Transparency / depth */
  --absolute-black: #000;
  --absolute-white: #fff;
  --overlay: rgba(0, 0, 0, 0.7);
  --surface-tint-01: rgba(255, 255, 255, 0.01);
  --surface-tint-02: rgba(255, 255, 255, 0.02);
  --surface-tint-025: rgba(255, 255, 255, 0.025);
  --surface-tint-03: rgba(255, 255, 255, 0.03);
  --surface-tint-035: rgba(255, 255, 255, 0.035);
  --surface-tint-04: rgba(255, 255, 255, 0.04);
  --surface-tint-045: rgba(255, 255, 255, 0.045);
  --surface-tint-05: rgba(255, 255, 255, 0.05);
  --surface-tint-06: rgba(255, 255, 255, 0.06);
  --surface-tint-08: rgba(255, 255, 255, 0.08);
  --surface-tint-12: rgba(255, 255, 255, 0.12);
  --surface-tint-15: rgba(255, 255, 255, 0.15);
  --surface-glass: rgba(20, 20, 20, 0.7);
  --surface-glass-soft: rgba(20, 20, 20, 0.5);
  --surface-overlay: rgba(10, 10, 10, 0.78);
  --surface-overlay-strong: rgba(10, 10, 10, 0.92);
  --surface-debug: rgba(8, 8, 8, 0.82);
  --chart-stage-start: #070707;
  --chip-contrast-bg: rgba(0, 0, 0, 0.3);
  --info-action-bg: rgba(125, 211, 252, 0.15);
  --info-action-bg-hover: rgba(125, 211, 252, 0.25);
  --info-action-border: rgba(125, 211, 252, 0.45);
  --info-hover-bg: rgba(125, 211, 252, 0.08);
  --info-hover-border: rgba(125, 211, 252, 0.45);
  --info-soft-text: rgba(125, 211, 252, 0.85);
  --info-icon-soft: rgba(125, 211, 252, 0.6);
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-soft: rgba(0, 0, 0, 0.35);
  --shadow-strong: rgba(0, 0, 0, 0.85);

  /* Admin / mock-lab component family */
  --bg-admin-app: #0f1115;
  --bg-admin-panel: #161b22;
  --bg-admin-row: #10171f;
  --bg-admin-row-unread: #101b29;
  --bg-admin-action: #16263a;
  --bg-admin-button: #1c232c;
  --border-admin-panel: #2a323c;
  --border-admin-row: #1f2a37;
  --accent-admin: #58a6ff;
  --warning-admin: #e3b341;
  --text-admin-primary: #c5d2e0;
  --text-admin-muted: #8b97a5;

  /* Chart Lab field / 3D component family */
  --field-bg: #070b12;
  --field-bg-gradient-end: #0b1020;
  --field-value-primary: #5de4ff;
  --field-value-positive: #3cffb0;
  --field-value-low: #1d8fb0;
  --field-volume: #3f7bd4;
  --field-warning: #ffd166;
  --field-danger: #ff6b7a;
  --text-field-primary: #e9f1ff;
  --text-field-muted: #8fa2bd;

  /* Marketing / home component family */
  --bg-hero: #f5f4f0;
  --bg-hero-edge: #efeee9;
  --bg-marketing-card: #121212;
  --hero-light-glass: rgba(245, 244, 240, 0.55);
  --hero-nav-glass: rgba(10, 10, 10, 0.6);
  --hero-nav-cta-bg: var(--border-subtle);
  --hero-nav-cta-hover-bg: #000;
  --hero-primary-bg: var(--text-strong);
  --hero-primary-text: var(--bg-app);
  --hero-primary-hover-bg: #f0f0f0;
  --hero-lower-shadow: rgba(0, 0, 0, 0.5);
  --hero-overlay-shadow: #000;
  --hero-fade-strong: rgba(10, 10, 10, 0.96);
  --hero-fade-mid: rgba(10, 10, 10, 0.88);
  --hero-fade-soft: rgba(10, 10, 10, 0.48);
  --hero-fade-end: rgba(10, 10, 10, 0.36);
  --hero-vfade-top: rgba(10, 10, 10, 0.92);
  --hero-vfade-mid: rgba(10, 10, 10, 0.12);
  --hero-vfade-bottom: rgba(10, 10, 10, 0.82);
  --text-marketing-primary: #e7ecf3;
  --text-marketing-muted: #7c8ea2;
}

[data-theme='light'] {
  color-scheme: light;
  
    /* Chart Lab - 2D price line + area fill (read by chart-lab.js canvas) */
  --chart-line: #0974AB;
  --chart-line-fill-top: rgba(9,116,171,0.92);
  --chart-line-fill-bottom: rgba(189,247,255,0.5);

  --bg-app: #f7f8fb;
  --bg-deep: #F0F3F5;
  --bg-panel: #f7f7f7;
  --bg-input: #f1f5f9;
  --bg-hover: #edf2f7;
  --bg-elevated: #ffffff;
  --bg-sidebar: #f8fafc;
  --bg-modal-panel: #ffffff;

  --text-primary: #172033;
  --text-heading: #07111f;
  --text-strong: #07111f;
  --text-body: #334155;
  --text-muted: #526174;
  --text-muted-strong: #3f4b5d;
  --text-disabled: #666666;
  --text-subtle: #526174;
  --text-soft: #334155;
  --text-on-dark: #ffffff;
  --text-on-dark-full: #ffffff;
  --text-on-accent: #ffffff;
  --text-alpha-95: rgba(7, 17, 31, 0.95);
  --text-alpha-90: rgba(7, 17, 31, 0.9);
  --text-alpha-85: rgba(7, 17, 31, 0.85);
  --text-alpha-78: rgba(7, 17, 31, 0.78);
  --text-alpha-70: rgba(7, 17, 31, 0.74);
  --text-alpha-55: rgba(7, 17, 31, 0.62);
  --text-alpha-45: rgba(7, 17, 31, 0.52);
  --text-alpha-35: rgba(7, 17, 31, 0.42);
  --text-alpha-25: rgba(7, 17, 31, 0.32);
  --text-inverse: #ffffff;

  --border: #d6dde8;
  --border-subtle: #e5eaf1;
  --border-strong: #c4cedb;
  --border-hover: #94a3b8;
  --border-input: #cbd5e1;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-strong: #1e40af;
  --accent-muted: rgba(37, 99, 235, 0.12);
  --accent-muted-10: rgba(37, 99, 235, 0.1);
  --accent-muted-15: rgba(37, 99, 235, 0.15);
  --accent-muted-35: rgba(37, 99, 235, 0.25);

  --success: #059669;
  --success-action: #16a34a;
  --active: #16a34a;
  --warning: #d97706;
  --warning-bright: #ca8a04;
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --danger-market: #dc2626;
  --info: #2563eb;
  --info-strong: #0369a1;

  --absolute-black: #000;
  --absolute-white: #fff;
  --overlay: rgba(15, 23, 42, 0.45);
  --surface-tint-01: rgba(15, 23, 42, 0.01);
  --surface-tint-02: rgba(15, 23, 42, 0.02);
  --surface-tint-025: rgba(15, 23, 42, 0.025);
  --surface-tint-03: rgba(15, 23, 42, 0.03);
  --surface-tint-035: rgba(15, 23, 42, 0.035);
  --surface-tint-04: rgba(15, 23, 42, 0.04);
  --surface-tint-045: rgba(15, 23, 42, 0.045);
  --surface-tint-05: rgba(15, 23, 42, 0.05);
  --surface-tint-06: rgba(15, 23, 42, 0.06);
  --surface-tint-08: rgba(15, 23, 42, 0.08);
  --surface-tint-12: rgba(15, 23, 42, 0.12);
  --surface-tint-15: rgba(15, 23, 42, 0.15);
  --surface-glass: rgba(255, 255, 255, 0.76);
  --surface-glass-soft: rgba(255, 255, 255, 0.62);
  --surface-overlay: rgba(255, 255, 255, 0.88);
  --surface-overlay-strong: rgba(255, 255, 255, 0.96);
  --surface-debug: rgba(255, 255, 255, 0.9);
  --chart-stage-start: #ffffff;
  --chip-contrast-bg: rgba(15, 23, 42, 0.05);
  --info-action-bg: var(--accent);
  --info-action-bg-hover: var(--accent-hover);
  --info-action-border: var(--accent);
  --info-hover-bg: var(--accent-muted-10);
  --info-hover-border: var(--accent-muted-35);
  --info-soft-text: var(--info);
  --info-icon-soft: var(--info-strong);
  --shadow: rgba(15, 23, 42, 0.14);
  --shadow-soft: rgba(15, 23, 42, 0.10);
  --shadow-strong: rgba(15, 23, 42, 0.24);

  --bg-admin-app: #f8fafc;
  --bg-admin-panel: #ffffff;
  --bg-admin-row: #f1f5f9;
  --bg-admin-row-unread: #eaf2ff;
  --bg-admin-action: #e8f1ff;
  --bg-admin-button: #e2e8f0;
  --border-admin-panel: #cbd5e1;
  --border-admin-row: #dbe4ef;
  --accent-admin: #2563eb;
  --warning-admin: #b7791f;
  --text-admin-primary: #172033;
  --text-admin-muted: #526174;

  --field-bg: #eef6ff;
  --field-bg-gradient-end: #dbeafe;
  --field-value-primary: #0369a1;
  --field-value-positive: #047857;
  --field-value-low: #0e7490;
  --field-volume: #2563eb;
  --field-warning: #b7791f;
  --field-danger: #dc2626;
  --text-field-primary: #0f172a;
  --text-field-muted: #3f4b5d;

  --bg-hero: #f5f4f0;
  --bg-hero-edge: #efeee9;
  --bg-marketing-card: #ffffff;
  --hero-light-glass: rgba(255, 255, 255, 0.72);
  --hero-nav-glass: rgba(255, 255, 255, 0.78);
  --hero-nav-cta-bg: var(--accent);
  --hero-nav-cta-hover-bg: var(--accent-hover);
  --hero-primary-bg: var(--accent);
  --hero-primary-text: var(--text-on-accent);
  --hero-primary-hover-bg: var(--accent-hover);
  --hero-lower-shadow: rgba(15, 23, 42, 0.12);
  --hero-overlay-shadow: rgba(15, 23, 42, 0.10);
  --hero-fade-strong: rgba(247, 248, 251, 0.96);
  --hero-fade-mid: rgba(247, 248, 251, 0.86);
  --hero-fade-soft: rgba(247, 248, 251, 0.52);
  --hero-fade-end: rgba(247, 248, 251, 0.32);
  --hero-vfade-top: rgba(247, 248, 251, 0.92);
  --hero-vfade-mid: rgba(247, 248, 251, 0.16);
  --hero-vfade-bottom: rgba(247, 248, 251, 0.82);
  --text-marketing-primary: #0f172a;
  --text-marketing-muted: #526174;
}