/*
 * Chartmaster theme tokens.
 *
 * Keep color, shadow and theme-dependent values here. Pages and modules may
 * keep their own layout CSS, but should read visual theme values from this
 * file so a redesign only needs one token update.
 */
:root {
  color-scheme: dark;
  --theme-meta: #0e1118;

  /* app tokens */
  --bg: #0e1118;
  --panel: #161b26;
  --panel-2: #1d2434;
  --border: #232a3a;
  --hairline: rgba(255, 255, 255, 0.04);
  --vlak-zacht: rgba(255, 255, 255, 0.02);
  --vlak-zacht2: rgba(255, 255, 255, 0.03);
  --text: #dfe4ee;
  --text-fel: #ffffff;
  --muted: #8b93a7;
  --bull: #26a69a;
  --bear: #ef5350;
  --gold: #c9a227;
  --gold-fel: #d3a72c;
  --accent: #2a3550;
  --accent-border: #3d4d78;
  --accent-tekst: #9fb0d8;
  --accent-zacht: rgba(61, 77, 120, 0.22);
  --op-accent: #ffffff;
  --surface-selected: #202a3a;
  --surface-selected-text: #f2f5fa;
  --surface-selected-muted: #aeb8ca;
  --surface-raised: #1a202c;
  --control-active: #263b43;
  --control-active-border: #3d746f;
  --control-active-text: #dff8f3;
  --focus-ring: rgba(69, 201, 181, 0.32);
  --nav-active: #45c9b5;
  --primary: #2f7d74;
  --primary-text: #ffffff;
  --gold-oppervlak: rgba(201, 162, 39, 0.12);
  --paneel-schaduw: 0 12px 32px rgba(0, 0, 0, 0.28);
  --dim-achter: rgba(0, 0, 0, 0.55);
  --schaduw: rgba(0, 0, 0, 0.5);

  /* canvas chart tokens */
  --chart-tekst: #c9d4ea;
  --chart-tekst-fel: #ffffff;
  --chart-dim: #8b93a7;
  --chart-dim-rgb: 139, 147, 167;
  --chart-tag: rgba(20, 24, 34, 0.9);
  --chart-tooltip: rgba(15, 18, 27, 0.97);
  --chart-vlak: #2a3347;
  --chart-vlak-rgb: 42, 51, 71;
  --chart-op-vlak: #ffffff;
  --chart-vlak-zacht: rgba(255, 255, 255, 0.02);
  --chart-lijn-fel: rgba(255, 255, 255, 0.85);
  --chart-watermerk: rgba(255, 255, 255, 0.03);
  --chart-halo: #0b0e15;

  /* Dutch aliases used by standalone pages */
  --bg-op: var(--chart-halo);
  --paneel: var(--panel);
  --paneel-hoog: var(--panel-2);
  --paneel-2: var(--panel-2);
  --rand: var(--border);
  --rand-fel: var(--accent-border);
  --tekst: var(--text);
  --tekst-fel: var(--text-fel);
  --dim: var(--muted);
  --goud: var(--gold);
  --goud-fel: var(--gold-fel);
  --op-goud: #14100a;
  --groen: var(--bull);
  --rood: var(--bear);
  --veld: var(--chart-halo);
  --dim-zacht: rgba(139, 147, 167, 0.72);
  --goud-waas: rgba(201, 162, 39, 0.13);
  --blauw: var(--accent-tekst);
  --blauw-vlak: var(--accent);
  --paars: #b39ddb;
  --schaduw-kaart: 0 18px 50px rgba(0, 0, 0, 0.5);
  --rond: 8px;
  --rond-groot: 8px;
  --breed: 1180px;

  /* demo broker tokens */
  --dm-bg: #12151d;
  --dm-vlak: #1a1e29;
  --dm-vlak2: #212633;
  --dm-rand: rgba(255, 255, 255, 0.09);
  --dm-tekst: var(--text);
  --dm-dim: var(--muted);
  --dm-groen: var(--bull);
  --dm-rood: var(--bear);
  --dm-blauw: #2b6be4;
  --dm-radius: 8px;
  --dm-glans: rgba(255, 255, 255, 0.16);
  --dm-glans2: rgba(255, 255, 255, 0.05);
  --dm-glans-rand: rgba(255, 255, 255, 0.18);
  --dm-hover: rgba(255, 255, 255, 0.12);
  --dm-schaduw: rgba(0, 0, 0, 0.35);
  --dm-op-kleur: #fff;
  --dm-balk: var(--dm-vlak);
  --dm-kaart: var(--dm-vlak);
  --dm-bulk-blauw: #d3e2ff;
  --dm-bulk-groen: #b1eae3;
  --dm-bulk-rood: #f7c0be;
}

:root[data-thema="licht"] {
  color-scheme: light;
  --theme-meta: #eef1f6;

  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f4f6fa;
  --border: #d3d9e5;
  --hairline: rgba(16, 22, 38, 0.09);
  --vlak-zacht: rgba(16, 22, 38, 0.03);
  --vlak-zacht2: rgba(16, 22, 38, 0.05);
  --text: #1a2133;
  --text-fel: #0a0e17;
  --muted: #5c6479;
  --bull: #0e8a7d;
  --bear: #d1403c;
  --gold: #96770f;
  --gold-fel: #ab8815;
  --accent: #dde5f6;
  --accent-border: #a9bce4;
  --accent-tekst: #2f4a86;
  --accent-zacht: rgba(120, 150, 210, 0.18);
  --op-accent: #14203a;
  --surface-selected: #e7edf7;
  --surface-selected-text: #14203a;
  --surface-selected-muted: #465574;
  --surface-raised: #ffffff;
  --control-active: #dceeea;
  --control-active-border: #78aaa3;
  --control-active-text: #145b53;
  --focus-ring: rgba(14, 138, 125, 0.24);
  --nav-active: #087f70;
  --primary: #087f70;
  --primary-text: #ffffff;
  --gold-oppervlak: rgba(150, 119, 15, 0.11);
  --paneel-schaduw: 0 12px 30px rgba(16, 22, 38, 0.12);
  --dim-achter: rgba(22, 28, 44, 0.32);
  --schaduw: rgba(16, 22, 38, 0.16);

  --chart-tekst: #2b344a;
  --chart-tekst-fel: #0a0e17;
  --chart-dim: #5c6479;
  --chart-dim-rgb: 92, 100, 121;
  --chart-tag: rgba(255, 255, 255, 0.92);
  --chart-tooltip: rgba(255, 255, 255, 0.98);
  --chart-vlak: #e2e8f4;
  --chart-vlak-rgb: 226, 232, 244;
  --chart-op-vlak: #1a2133;
  --chart-vlak-zacht: rgba(16, 22, 38, 0.025);
  --chart-lijn-fel: rgba(20, 26, 40, 0.8);
  --chart-watermerk: rgba(16, 22, 38, 0.04);
  --chart-halo: #ffffff;

  --op-goud: #ffffff;
  --veld: #ffffff;
  --dim-zacht: rgba(92, 100, 121, 0.8);
  --goud-waas: rgba(150, 119, 15, 0.12);
  --paars: #6b4fa8;
  --schaduw-kaart: 0 18px 46px rgba(16, 22, 38, 0.13);

  --dm-bg: #ffffff;
  --dm-vlak: #f5f7fb;
  --dm-vlak2: #e9edf5;
  --dm-rand: rgba(16, 22, 38, 0.13);
  --dm-blauw: #2258c8;
  --dm-glans: rgba(16, 22, 38, 0.07);
  --dm-glans2: rgba(16, 22, 38, 0.02);
  --dm-glans-rand: rgba(16, 22, 38, 0.14);
  --dm-hover: rgba(16, 22, 38, 0.08);
  --dm-schaduw: rgba(16, 22, 38, 0.14);
  --dm-op-kleur: #fff;
  --dm-balk: var(--dm-vlak);
  --dm-kaart: var(--dm-vlak);
  --dm-bulk-blauw: #17427f;
  --dm-bulk-groen: #0a5a52;
  --dm-bulk-rood: #8f2320;
}