/*
 * parity-deriva — token di design dell'applicativo.
 *
 * Tema: segue il sistema operativo. Un interruttore lo forza scrivendo
 * data-theme="light" o data-theme="dark" su <html>; togliendo l'attributo si
 * torna al sistema. Regole d'uso di ogni colore in docs/web/DESIGN.md.
 *
 * Ogni colore ha un solo compito. L'ocra è del marchio e dell'azione
 * principale e non entra mai in grafici, tabelle o stati.
 */

:root {
  color-scheme: light dark;

  /* marchio: uguale nei due temi */
  --brand-ochre: #C98A45;
  --brand-ink: #152C3A;
  --brand-ivory: #F4EFE4;
  --brand-night: #0B1A26;

  /* tipografia */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-title: "PD Instrument", "Instrument Serif", Georgia, serif; /* solo titoli */
  /* un punto più di prima (aspetto "paper", il predefinito: vedi in fondo) */
  --fs-label: 12px;   /* etichette maiuscole, intestazioni di tabella */
  --fs-small: 13px;   /* note, legenda, assi */
  --fs-body: 14px;    /* testo, celle, campi */
  --fs-title: 16px;   /* testo in evidenza in Plex; i titoli usano --fs-h-* */
  --fs-stat: 17px;    /* valori secondari */
  --fs-kpi: 22px;     /* valori principali */
  --fs-h-page: 24px;   /* titoli (--font-title): nome della pagina in testata */
  --fs-h-dialog: 22px; /* titoli dei dialog */
  --fs-h-panel: 18px;  /* titoli dei pannelli */
  --fs-h-section: 24px; /* h3 (--font-title): le sezioni dentro un pannello */
  --fs-h-sub: 17px;     /* h4, in Plex: le parti di una sezione */
  --tracking-title: 0.01em;
  --lh: 1.45;
  --tracking-label: 0.06em;

  /* spazi e forme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --gutter: 28px;
  --radius-xs: 4px;   /* un segmento dentro una cornice da 6 px con 2 px di padding: raggio concentrico */
  --radius-s: 6px;    /* campi, pulsanti */
  --radius-m: 10px;   /* pannelli */
  --radius-l: 14px;
  --radius-pill: 999px;
  --control-h: 34px;
  --target-min: 24px; /* il bersaglio più piccolo, un bottone in una riga (WCAG 2.2, 2.5.8) */
  --header-h: 60px;   /* la testata: una riga, la stessa su ogni pagina */
  --side-tabs-w: 232px; /* la colonna dei tab verticali, con le loro righe di stato (settings, mix) */
  --rail-w: 300px;    /* il binario dei passi accanto alla pagina, da 1280 px (sim.html #step-rail) */

  /* le due sole ombre (DESIGN.md § 5): dietro un dialog, sotto ciò che sta
     sospeso sul contenuto senza fondo scuro dietro (le risorse del server) */
  --backdrop: rgba(0, 0, 0, 0.55);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.25);

  /* riservati: uguali nei due temi */
  --live: #C9423A;     /* badge LIVE, solo quello */
  --on-live: #FFFFFF;  /* 4.86:1 */
}

/* ---- tema chiaro (predefinito se il sistema non chiede lo scuro) ---- */
:root,
:root[data-theme="light"] {
  --bg: #F6F3EC;
  --panel: #FFFFFF;
  --raised: #FBF9F5;
  --line: #E3DED3;       /* separatori */
  --border: #7D8E99;     /* bordi dei campi, 3.4:1 su panel */
  --grid: #EEEAE2;       /* griglia dei grafici */

  --text: #152C3A;       /* 14.5:1 su panel */
  --text-2: #354149;     /* 10.5:1, e ≥ 9:1 su ogni fondo chiaro */
  --text-3: #455159;     /* 8.2:1, e ≥ 7:1 su ogni fondo chiaro — etichette, note, assi */
  --heading: #1B5670;    /* petrolio: h3 e h4, 8.0:1 su panel, ≥ 7.2:1 su ogni fondo chiaro */

  --accent: #C98A45;     /* riempimento del pulsante principale */
  --on-accent: #152C3A;  /* testo sul pulsante, 4.96:1 */
  --accent-text: #9A5F22;/* ocra come testo (link, ghost), 5.2:1 */
  --focus: #A8702F;      /* anello di focus, 4.2:1 */

  --entry: #286DBC;      /* entry, selezione riga↔grafico, info, practice: 5.2:1 */
  --up: #137B58;         /* long, target, guadagno, candela su: 5.3:1 */
  --down: #C13D35;       /* short, stop, perdita, candela giù, errori: 5.3:1, 4.5:1 su --error-bg */
  --warn: #C2410C;       /* stato alto, sotto il critico (risorse del server): 5.2:1 su panel */
  --verify: #0B7380;     /* la fase verify della guida del wizard, come bottone: 5.6:1 su panel, 5.0:1 su bg */
  --mark-exit: var(--text);
  --mark-trail: var(--text-3);

  --row-selected: #EAF1FA;
  --info-bg: #EAF1FA;
  --error-bg: #FBEAE8;
  --trade-span: rgba(42, 116, 199, 0.07);
}

/* ---- tema scuro dal sistema ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1A26;
    --panel: #102433;
    --raised: #16304A;
    --line: #22394B;
    --border: #52708A;   /* 3.1:1 su panel */
    --grid: #1A3244;

    --text: #F4EFE4;     /* 13.9:1 */
    --text-2: #CDD5DA;   /* 10.7:1, APCA Lc ≥ 75 su ogni fondo scuro */
    --text-3: #B2BBC2;   /* 8.2:1, Lc ≥ 60 */
    --heading: #D6BFA0;  /* seppia: h3 e h4, 8.9:1, ≥ 7.6:1 su ogni fondo scuro */

    --accent: #C98A45;
    --on-accent: #0B1A26;   /* 6.05:1 */
    --accent-text: #E7A45E; /* 7.5:1 */
    --focus: #C98A45;       /* 5.5:1 */

    --entry: #72ADE5;    /* 6.7:1, Lc ≥ 50 */
    --up: #2CBD8D;       /* 6.6:1, Lc ≥ 50 */
    --down: #EC8E87;     /* 6.6:1, Lc ≥ 50 */
    --warn: #F08A24;     /* 6.3:1 */
    --verify: #35B3C2;   /* 6.3:1 */
    --mark-exit: var(--text);
    --mark-trail: var(--text-3);

    --row-selected: #173049;
    --info-bg: #12304A;
    --error-bg: #3A1F24;
    --trade-span: rgba(63, 143, 219, 0.09);
  }
}

/* ---- tema scuro forzato dall'interruttore (vince sul sistema) ---- */
:root[data-theme="dark"] {
  --bg: #0B1A26;
  --panel: #102433;
  --raised: #16304A;
  --line: #22394B;
  --border: #52708A;
  --grid: #1A3244;

  --text: #F4EFE4;
  --text-2: #CDD5DA;
  --text-3: #B2BBC2;
  --heading: #D6BFA0;

  --accent: #C98A45;
  --on-accent: #0B1A26;
  --accent-text: #E7A45E;
  --focus: #C98A45;

  --entry: #72ADE5;
  --up: #2CBD8D;
  --down: #EC8E87;
  --warn: #F08A24;
  --verify: #35B3C2;
  --mark-exit: var(--text);
  --mark-trail: var(--text-3);

  --row-selected: #173049;
  --info-bg: #12304A;
  --error-bg: #3A1F24;
  --trade-span: rgba(63, 143, 219, 0.09);
}

/* ---- aspetto (analisi del 29/09/2026, docs/ux/analisi-2026-09-29-contrasto.md) ----
   "paper", il predefinito: i grigi e i colori sopra, un punto in più.
   "ink": gli stessi colori alle dimensioni di prima. "classic": com'era
   fino al 29/09/2026, tranne il rosso chiaro, che sul fondo degli errori
   era sotto 4.5:1. Lo sceglie il selettore della testata (menu.js) e lo
   legge la <head> di ogni pagina: data-look su <html>.
   ParceEtRecte: le dimensioni scritte in px e non con --fs-* (la spia delle
   risorse, la mappa della rete, qualche controllo) restano uguali in tutti
   e tre; si passano ai token se "paper" le fa sembrare piccole. */
:root[data-look="ink"], :root[data-look="classic"] {
  --fs-label: 11px;
  --fs-small: 12px;
  --fs-body: 13px;
  --fs-title: 15px;
}
:root[data-look="classic"]:not([data-theme="dark"]) {
  --text-2: #4A5B67;
  --text-3: #5E6E78;
  --up: #15855F;
  --entry: #2A74C7;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="classic"]:not([data-theme="light"]) {
    --text-2: #B3BFC7;
    --text-3: #8E9CA6;
    --entry: #3F8FDB;
    --up: #26A37A;
    --down: #E5655C;
  }
}
:root[data-look="classic"][data-theme="dark"] {
  --text-2: #B3BFC7;
  --text-3: #8E9CA6;
  --entry: #3F8FDB;
  --up: #26A37A;
  --down: #E5655C;
}