/* Design tokens — professional trading terminal.
   Master §26: dark graphite/navy, superfici differenziate, verde/amber/rosso
   semantici, niente neon, raggio moderato, numeri tabulari. §27: dark/light/system.
   Il tema si applica su <html data-theme="dark|light">; "system" viene risolto in
   uno dei due da js/core/theme.js, così il CSS non ha mai uno stato ambiguo. */

:root {
  color-scheme: dark;

  /* Tipografia */
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace;
  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-md: 12.5px;
  --fs-lg: 14px;
  --fs-xl: 17px;

  /* Densità — §61 appearance.density. Guida altezze riga e padding. */
  --row-h: 26px;
  --cell-py: 3px;
  --cell-px: 7px;
  --control-h: 24px;

  /* Raggi e bordi moderati */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --bw: 1px;

  /* Spaziature */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;

  /* Altezze del chrome: budget verticale esplicito (§95).
     A 1366×768 chrome totale ≈ 40+62+22 = 124px + thead. */
  --h-topbar: 40px;
  --h-filterbar: 62px;
  --h-statusbar: 22px;

  --z-table-head: 20;
  --z-sticky-col: 15;
  --z-filterbar: 40;
  --z-topbar: 50;
  --z-drawer: 80;
  --z-popover: 90;
  --z-modal: 100;
  --z-toast: 110;

  --dur-flash: 900ms;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .45);
}

:root[data-density="comfortable"] {
  --row-h: 32px;
  --cell-py: 6px;
  --cell-px: 9px;
  --control-h: 28px;
  --fs-md: 13px;
  --fs-sm: 12px;
}

/* --- Dark (default): graphite/navy ------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f14;
  --surface-1: #11161d;
  --surface-2: #161d26;
  --surface-3: #1c242f;
  --surface-hover: #1f2833;
  --surface-sel: #1b2a3d;
  --border: #232c38;
  --border-strong: #33404f;
  --text: #e6edf3;
  --text-2: #a4b0be;
  --text-3: #6e7c8c;
  --accent: #4c8dff;
  --accent-weak: #16283f;
  --pos: #34c759;
  --pos-bg: #10281a;
  --pos-border: #1d4c30;
  --warn: #e3a008;
  --warn-bg: #2a2109;
  --warn-border: #4d3d0c;
  --neg: #ff5f56;
  --neg-bg: #2c1416;
  --neg-border: #5a2226;
  --info-bg: #12212f;
  --scrollbar: #2a3542;
  --skeleton: linear-gradient(90deg, #161d26 25%, #1e2731 37%, #161d26 63%);
}

/* --- Light -------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f5;
  --surface-1: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef2f6;
  --surface-hover: #e9eef4;
  --surface-sel: #dfeaf9;
  --border: #d5dce4;
  --border-strong: #b9c3ce;
  --text: #10151c;
  --text-2: #4d5a68;
  --text-3: #79858f;
  --accent: #1c62d6;
  --accent-weak: #e3edfd;
  --pos: #157f3b;
  --pos-bg: #e4f5e9;
  --pos-border: #b7e0c4;
  --warn: #8a6100;
  --warn-bg: #fdf3d9;
  --warn-border: #ecd79a;
  --neg: #bf2a1f;
  --neg-bg: #fdeae8;
  --neg-border: #f2c1bb;
  --info-bg: #eaf1fb;
  --scrollbar: #c2cbd5;
  --skeleton: linear-gradient(90deg, #f0f3f7 25%, #e6ebf1 37%, #f0f3f7 63%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-flash: 1ms; }
}