/* ============================================================
   lcRaptor 4.8 "Veste Grafica" — DESIGN TOKENS
   ------------------------------------------------------------
   Sorgente: `_DEVELOP/ui-refresh/mockups/tokens.css` (export Claude Design,
   agosto 2026). Questo file è la COPIA DI LAVORO nel core: contiene solo
   variabili, nessuna regola sui componenti (quelle stanno in `theme.css`).

   ⚠️ NON scrivere qui hex o px "sparsi": se serve un valore nuovo, si aggiunge
   una variabile e la si porta anche nel file sorgente in `_DEVELOP/`, così una
   ri-esportazione da Claude Design non la perde.

   DELTA rispetto al file sorgente (documentati, sono gli unici):
   1. Il selettore del tema scuro era `[data-theme="dark"]`. Qui è
      `:root[data-theme=dark], :root[data-bs-theme=dark]`:
      - il prefisso `:root` è OBBLIGATORIO — la sidebar del pannello è un
        `<aside ... data-bs-theme="dark">` e senza `:root` le superfici scure
        piomberebbero dentro la sidebar anche a tema chiaro;
      - il doppio selettore serve perché il toggle (M2) marca `<html>` con
        ENTRAMBI gli attributi: `data-theme` pilota i nostri token,
        `data-bs-theme` fa scattare anche il ramo scuro nativo di Tabler.
   2. Aggiunti i tripletti `*-rgb`: Tabler compone diversi colori con
      `rgba(var(--tblr-primary-rgb), .x)` e le variabili CSS non sanno
      scomporre un hex.
   3. `--text-muted` scurito da #66767a a #637377. Il valore dei mockup è
      calcolato su fondo BIANCO (4.73:1), ma nel pannello vero il testo muted
      capita anche sullo sfondo applicazione `--surface-3` #f2f5f5, dove
      scendeva a 4.32:1 — sotto AA. #637377 tiene 4.94:1 su bianco e 4.51:1
      sul grigio, restando ben distinto da `--text-secondary`.
   4. Aggiunta la coppia `--danger-fill` / `--danger-fill-fg` per il bottone
      distruttivo PIENO. I mockup prevedono solo la variante testuale, ma il
      pannello usa `.btn-danger` pieno in 12 punti e il rosso "solid" (pensato
      per pallini e barre) con testo bianco dà 4.37:1. La coppia inverte
      polarità nel tema scuro, come già fa `--text-on-primary`.
   ============================================================ */

:root {
  /* ---------- Tipografia ---------- */
  --font-sans: "Inter Var", Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-features: "cv05", "ss01";

  --text-2xs: 11px;    /* badge minimi, note */
  --text-xs: 11.5px;   /* intestazioni tabella, caption */
  --text-sm: 12.5px;   /* meta, label form, chip */
  --text-base: 13.5px; /* testo interfaccia, bottoni */
  --text-md: 14px;     /* titoli record in lista */
  --text-lg: 16px;     /* titolo editor, titoli card grandi */
  --text-xl: 19px;     /* h2 nel contenuto */
  --text-2xl: 23px;    /* numeri KPI piccoli */
  --text-3xl: 25px;    /* titolo pagina (h1) */
  --text-4xl: 30px;    /* numeri KPI dashboard */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-title: -0.5px;  /* h1 */
  --tracking-heading: -0.2px;
  --tracking-tight: -0.1px;  /* titoli record */
  --tracking-caps: 0.05em;   /* intestazioni tabella maiuscole */
  --tracking-caps-wide: 0.1em; /* label sezione sidebar */

  /* ---------- Superfici ---------- */
  --surface-1: #ffffff;   /* card, pannelli, topbar */
  --surface-2: #fafcfc;   /* header tabella, hover riga */
  --surface-3: #f2f5f5;   /* sfondo applicazione, hover icone */
  --surface-4: #eef2f2;   /* riempimento neutro, track barre */
  --surface-5: #e4ecec;   /* riempimento neutro forte */
  --surface-6: #d8e2e3;   /* placeholder, bordi pieni */
  --surface-7: #c6d0d1;   /* placeholder immagine */
  --surface-overlay: rgba(255,255,255,.93); /* header sticky con blur */

  --accent-soft: #eef4f5;      /* chip e riquadri accento */
  --accent-soft-strong: #cfe4e7; /* selezione: dove il velo tenue non si distingue dal fondo */
  --success-soft: #e8f5ec;
  --warning-soft: #fdf3e4;
  --warning-soft-alt: #fdf1dc;
  --danger-soft: #fdeceb;

  /* ---------- Bordi ---------- */
  --border: #dfe6e7;          /* controlli: bottoni, campi */
  --border-soft: #e2e8e9;     /* card, divisori topbar */
  --border-faint: #eef2f2;    /* separatori interni */
  --border-hairline: #f2f5f5; /* righe di lista */
  --border-hover: #b9c7c9;    /* hover bottone secondario, dashed */

  /* ---------- Testo ---------- */
  --text-heading: #0f1c1f;    /* h1, titoli card — 17.4:1 */
  --text-body: #16272b;       /* corpo editor — 15.5:1 */
  --text-strong: #28393d;     /* label form, voci menu — 12.1:1 */
  --text-default: #41565a;    /* icone topbar, testo forte — 7.8:1 */
  --text-secondary: #5c6c70;  /* descrizioni, sottotitoli — 5.5:1 */
  --text-muted: #637377;      /* meta, timestamp — 4.94:1 su bianco, 4.51:1 su --surface-3 (delta 3) */
  --text-faint: #8b9c9f;      /* solo icone e placeholder decorativi */
  --text-disabled: #9fb0b3;   /* placeholder campi, empty state */
  --text-decor: #b9c7c9;      /* maniglie drag, elementi non informativi */
  --text-on-accent: #ffffff;  /* testo su sidebar attiva / brand */
  --text-on-primary: #ffffff; /* testo dentro i bottoni primari */

  /* ---------- Accento (petrolio/teal) ---------- */
  --accent: #0c7d8a;           /* bottone primario, switch on, titoli record */
  --accent-hover: #0a6b77;
  --accent-brand: #0f8c9b;     /* logo */
  --accent-link: #0a6b77;      /* link testuali — 6.2:1 */
  --accent-link-hover: #084f58;
  --accent-text-soft: #2a5f68; /* testo dentro chip accento */
  --accent-bright: #3fc4d4;    /* icone su fondo sidebar */
  --focus-ring: #0a6b7722;     /* alone focus, usato a 3px */

  /* tripletti rgb (delta 2: servono a Tabler per gli alpha) */
  --accent-rgb: 12,125,138;
  --success-rgb: 15,122,69;
  --warning-rgb: 154,91,19;
  --danger-rgb: 185,58,43;
  --text-body-rgb: 22,39,43;
  --surface-1-rgb: 255,255,255;

  /* ---------- Semantici ---------- */
  --success: #0f7a45;        /* testo/badge ok */
  --success-solid: #12a150;  /* pallini, barre di stato */
  --warning: #9a5b13;
  --warning-alt: #8a5a00;
  --warning-solid: #e2a53a;
  --danger: #b93a2b;         /* testo distruttivo, asterischi */
  --danger-alt: #c8492f;
  --danger-solid: #d24b3b;   /* pallino notifiche, barre */
  --danger-fill: #b93a2b;    /* fondo del bottone distruttivo pieno (delta 4) */
  --danger-fill-fg: #ffffff; /* testo dentro il bottone distruttivo — 5.67:1 */
  --info: #1a4fa0;
  --serp-url: #3d6b3d;       /* anteprima Google */

  /* ---------- Grafici ---------- */
  --chart-1: #7fb9c1;
  --chart-2: #dceef0;
  --chart-3: #bde2e7;
  --chart-4: #8fe1ec;

  /* ---------- Sidebar (superficie sempre scura) ---------- */
  --sidebar-bg: #063239;
  --sidebar-item: #aebdbf;          /* voce a riposo — 7.2:1 */
  --sidebar-item-strong: #c6d3d4;
  --sidebar-label: #7fa0a3;         /* label di sezione — 4.9:1 */
  --sidebar-muted: #7f9497;         /* footer, versione */
  --sidebar-hover: #0f4048;
  --sidebar-active: #1b494f;
  --sidebar-border: #315c62;
  --sidebar-border-hover: #41757c;
  --sidebar-card: #0a444d;          /* box spazio disco */
  --sidebar-track: #1b5b64;         /* track barra disco */
  --sidebar-avatar: #14383d;

  /* ---------- Campi form ---------- */
  --field-bg-filled: #f0f5f5;       /* variante adottata: fondo pieno */
  --field-border-filled: #d8e2e3;
  --field-border-outlined: #9db1b4; /* variante alternativa bordata */
  --switch-knob: #ffffff;

  /* ---------- Raggi ---------- */
  --radius-xs: 4px;    /* micro-badge, barre */
  --radius-sm: 6px;    /* badge, chip */
  --radius-md: 8px;    /* bottoni piccoli, voci menu */
  --radius-lg: 9px;    /* bottoni, campi, voci sidebar */
  --radius-xl: 11px;   /* dropdown, box informativi */
  --radius-2xl: 13px;  /* card e contenitori lista */
  --radius-pill: 99px; /* switch, pallini, avatar */

  /* ---------- Ombre ---------- */
  --shadow-sm: 0 1px 2px rgba(15,28,31,.10);          /* card sollevate */
  --shadow-md: 0 10px 28px rgba(15,28,31,.14);        /* dropdown, popover */
  --shadow-field-inset: inset 0 1.5px 3px rgba(15,28,31,.06);
  --focus-shadow: 0 0 0 3px var(--focus-ring);

  /* ---------- Spaziature ---------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 26px;

  --gap-inline: 7px;    /* icona + testo */
  --gap-control: 9px;   /* gruppi di bottoni */
  --gap-card: 14px;     /* dentro le card */
  --gap-section: 20px;  /* tra blocchi di pagina */

  /* ---------- Misure di layout ---------- */
  --sidebar-width: 252px;
  --aside-width: 302px;
  --content-max: 1440px;
  --topbar-height: 58px;
  --control-height: 38px;      /* bottoni e campi standard */
  --control-height-sm: 36px;
  --control-height-lg: 40px;   /* campi principali dell'editor */
  --icon-button-size: 34px;
  --page-padding: 26px;

  --switch-width: 40px;
  --switch-height: 24px;
  --switch-knob-size: 18px;
  --switch-width-sm: 38px;
  --switch-height-sm: 22px;
  --switch-knob-size-sm: 16px;

  --scrollbar-thumb: #cdd6d7;
  --transition: 120ms ease;
}

/* ============================================================
   TEMA SCURO — vedi delta 1 in testa al file per il perché del `:root`
   ============================================================ */
:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
  --surface-1: #12292f;
  --surface-2: #17323a;
  --surface-3: #0b2126;
  --surface-4: #1b3a41;
  --surface-5: #21444c;
  --surface-6: #2a5058;
  --surface-7: #325c65;
  --surface-overlay: rgba(18,41,47,.93);

  --accent-soft: #103a42;
  --accent-soft-strong: #17515c;
  --success-soft: #12321f;
  --warning-soft: #33280f;
  --warning-soft-alt: #3a2c11;
  --danger-soft: #35201d;

  --border: #2b4c54;
  --border-soft: #26454c;
  --border-faint: #1f3d44;
  --border-hairline: #1a353b;
  --border-hover: #3d6d76;

  --text-heading: #eef6f7;
  --text-body: #e3eff0;
  --text-strong: #cddcde;
  --text-default: #b3c6c9;
  --text-secondary: #9bb0b3;
  --text-muted: #8ba1a5;
  --text-faint: #7b9296;
  --text-disabled: #6b8286;
  --text-decor: #567176;
  --text-on-accent: #ffffff;
  --text-on-primary: #04222a;   /* su accento chiaro serve testo scuro */

  --accent: #2ab0c0;
  --accent-hover: #3ec4d3;
  --accent-brand: #0f8c9b;
  --accent-link: #4fc9d8;
  --accent-link-hover: #8fe1ec;
  --accent-text-soft: #7fd2dd;
  --accent-bright: #3fc4d4;
  --focus-ring: #4fc9d833;

  --accent-rgb: 42,176,192;
  --success-rgb: 69,207,136;
  --warning-rgb: 230,178,90;
  --danger-rgb: 255,143,122;
  --text-body-rgb: 227,239,240;
  --surface-1-rgb: 18,41,47;

  --success: #45cf88;
  --success-solid: #2fae63;
  --warning: #e6b25a;
  --warning-alt: #d9a54a;
  --warning-solid: #d9a13c;
  --danger: #ff8f7a;
  --danger-alt: #ff8f7a;
  --danger-solid: #cf5240;
  --danger-fill: #ff8f7a;      /* nel dark il pieno si schiarisce e il testo diventa scuro */
  --danger-fill-fg: #2d0a05;
  --info: #86aef5;
  --serp-url: #86c58f;

  --chart-1: #2f7f8c;
  --chart-2: #12333a;
  --chart-3: #1c5561;
  --chart-4: #3fc4d4;

  --sidebar-bg: #04191d;
  --sidebar-item: #aebdbf;
  --sidebar-item-strong: #c6d3d4;
  --sidebar-label: #7fa0a3;
  --sidebar-muted: #7f9497;
  --sidebar-hover: #0c343a;
  --sidebar-active: #12454c;
  --sidebar-border: #23474e;
  --sidebar-border-hover: #41757c;
  --sidebar-card: #073037;
  --sidebar-track: #14454e;
  --sidebar-avatar: #0d3238;

  --field-bg-filled: #17323a;
  --field-border-filled: #2b4c54;
  --field-border-outlined: #3d6d76;
  --switch-knob: #eaf6f8;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 12px 30px rgba(0,0,0,.50);
  --shadow-field-inset: inset 0 1.5px 3px rgba(0,0,0,.35);

  --scrollbar-thumb: #2a5058;
}
