/* Solution Retail · token di design
   Tre livelli (skill design-system): primitivi → semantici → componenti.
   Colori presi dal logo: petrolio (#0B4A5B) per «SOLUTION», ciano (#009EBB) per «RETAIL».
   Linea grafica: cornice scura con menu a sinistra e pannello bianco, filtri a riquadro, stati a pillola,
   giallo solo come evidenziatore (contatori, avvisi). */

:root {
  /* ── primitivi: marchio (petrolio del logo) ── */
  --brand-50:  #ebf4f7;
  --brand-100: #d3e7ee;
  --brand-200: #a7cfdc;
  --brand-300: #6fadc2;
  --brand-400: #3a8aa3;
  --brand-500: #1d6c85;
  --brand-600: #12586e;
  --brand-700: #0b4a5b;
  --brand-800: #093a48;
  --brand-900: #062a35;

  /* ── primitivi: accento (ciano del logo) ── */
  --accent-50:  #e6f7fb;
  --accent-100: #c4ecf5;
  --accent-300: #5ccbe0;
  --accent-500: #009ebb;
  --accent-600: #0088a3;
  --accent-700: #006f86;

  /* ── primitivi: evidenziatore giallo ── */
  --giallo-100: #fdf1c7;
  --giallo-400: #f9c932;
  --giallo-500: #f2b705;
  --giallo-800: #6b4f00;

  /* ── primitivi: cornice e neutri freddi ── */
  --notte-900: #0e1b28;
  --notte-800: #142433;
  --notte-700: #1d3042;
  --grigio-0:   #ffffff;
  --grigio-25:  #fbfcfd;
  --grigio-50:  #f5f7f9;
  --grigio-100: #eef1f4;
  --grigio-200: #e3e8ed;
  --grigio-300: #cdd5dd;
  --grigio-400: #a3aeb9;
  --grigio-500: #6f7c89;
  --grigio-600: #55616d;
  --grigio-700: #39434d;
  --grigio-900: #111a22;

  /* ── primitivi: stati (riservati: mai usati come colori di serie) ── */
  --green-bg: #e4f5e9;  --green-fg: #23803c;  --green-solid: #2f9a4c;
  --amber-bg: #fdf3cf;  --amber-fg: #8a6100;  --amber-solid: #e0a400;
  --red-bg:   #fde9e3;  --red-fg:   #c2410c;  --red-solid:   #dc4a1a;
  --blue-bg:  #e3effd;  --blue-fg:  #1f6fd1;

  /* ── tipografia ── */
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-titoli: 'Plus Jakarta Sans', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;

  /* ── spazi, raggi, ombre, movimento ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(14, 27, 40, .05);
  --shadow-2: 0 12px 32px rgba(14, 27, 40, .14);
  --shadow-cornice: 0 30px 60px -20px rgba(14, 27, 40, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 180ms;

  /* ── semantici (tema chiaro) ── */
  color-scheme: light;
  --sfondo-pagina: linear-gradient(135deg, #e6f1fb 0%, #f3f6f9 45%, #fdf5dc 100%);
  --bg:            var(--grigio-50);
  --surface:       var(--grigio-0);
  --surface-2:     var(--grigio-0);
  --surface-sunk:  var(--grigio-100);
  --line:          var(--grigio-200);
  --line-strong:   var(--grigio-300);
  --text:          var(--grigio-900);
  --text-2:        var(--grigio-600);
  --text-3:        var(--grigio-500);
  --primary:       var(--brand-700);
  --primary-hover: var(--brand-800);
  --primary-soft:  var(--brand-50);
  --primary-text:  var(--brand-700);
  --on-primary:    #ffffff;
  --accent:        var(--accent-500);
  --accent-soft:   var(--accent-50);
  --accent-text:   var(--accent-700);
  --evidenzia:     var(--giallo-400);
  --evidenzia-soft: var(--giallo-100);
  --on-evidenzia:  var(--notte-900);
  --focus:         var(--accent-500);
  --nav-bg:        var(--notte-900);
  --nav-text:      #c3cdd7;
  --nav-active:    rgba(255, 255, 255, .09);

  /* tessere con icona (come nel riferimento: quadrato tenue + icona) */
  --tono-blu-bg: #e3effd;   --tono-blu-fg: #1f6fd1;
  --tono-giallo-bg: #fdf1c7; --tono-giallo-fg: #a57700;
  --tono-verde-bg: #e4f5e9; --tono-verde-fg: #23803c;
  --tono-ciano-bg: #e0f5fa; --tono-ciano-fg: #00809a;

  /* grafici (validati con la skill dataviz: categoriali in ordine fisso) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;
  --chart-grid: var(--grigio-200);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sfondo-pagina: linear-gradient(135deg, #0a121a 0%, #0d161f 60%, #17150c 100%);
    --bg: #121a22; --surface: #17212b; --surface-2: #1c2733; --surface-sunk: #111921;
    --line: #26323e; --line-strong: #34424f;
    --text: #e9eef2; --text-2: #aab6c1; --text-3: #85929e;
    --primary: var(--accent-300); --primary-hover: #8adcec; --primary-soft: rgba(0, 158, 187, .16); --primary-text: var(--accent-300); --on-primary: #062a35;
    --accent-soft: rgba(0, 158, 187, .16); --accent-text: var(--accent-300);
    --evidenzia-soft: rgba(249, 201, 50, .16);
    --nav-bg: #0a141d;
    --green-bg: rgba(47, 154, 76, .18); --green-fg: #86d49b; --amber-bg: rgba(224, 164, 0, .18); --amber-fg: #f2cd63;
    --red-bg: rgba(220, 74, 26, .18); --red-fg: #f6a585; --blue-bg: rgba(31, 111, 209, .2); --blue-fg: #9cc6f3;
    --tono-blu-bg: rgba(31, 111, 209, .2); --tono-blu-fg: #9cc6f3; --tono-giallo-bg: rgba(249, 201, 50, .16); --tono-giallo-fg: #f2cd63;
    --tono-verde-bg: rgba(47, 154, 76, .18); --tono-verde-fg: #86d49b; --tono-ciano-bg: rgba(0, 158, 187, .18); --tono-ciano-fg: #7fd6e8;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --seq-1: #102c4f; --seq-2: #154070; --seq-3: #1c5cab; --seq-4: #2a78d6; --seq-5: #5598e7; --seq-6: #86b6ef; --seq-7: #b7d3f6;
    --chart-grid: #26323e;
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sfondo-pagina: linear-gradient(135deg, #0a121a 0%, #0d161f 60%, #17150c 100%);
  --bg: #121a22; --surface: #17212b; --surface-2: #1c2733; --surface-sunk: #111921;
  --line: #26323e; --line-strong: #34424f;
  --text: #e9eef2; --text-2: #aab6c1; --text-3: #85929e;
  --primary: var(--accent-300); --primary-hover: #8adcec; --primary-soft: rgba(0, 158, 187, .16); --primary-text: var(--accent-300); --on-primary: #062a35;
  --accent-soft: rgba(0, 158, 187, .16); --accent-text: var(--accent-300);
  --evidenzia-soft: rgba(249, 201, 50, .16);
  --nav-bg: #0a141d;
  --green-bg: rgba(47, 154, 76, .18); --green-fg: #86d49b; --amber-bg: rgba(224, 164, 0, .18); --amber-fg: #f2cd63;
  --red-bg: rgba(220, 74, 26, .18); --red-fg: #f6a585; --blue-bg: rgba(31, 111, 209, .2); --blue-fg: #9cc6f3;
  --tono-blu-bg: rgba(31, 111, 209, .2); --tono-blu-fg: #9cc6f3; --tono-giallo-bg: rgba(249, 201, 50, .16); --tono-giallo-fg: #f2cd63;
  --tono-verde-bg: rgba(47, 154, 76, .18); --tono-verde-fg: #86d49b; --tono-ciano-bg: rgba(0, 158, 187, .18); --tono-ciano-fg: #7fd6e8;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --seq-1: #102c4f; --seq-2: #154070; --seq-3: #1c5cab; --seq-4: #2a78d6; --seq-5: #5598e7; --seq-6: #86b6ef; --seq-7: #b7d3f6;
  --chart-grid: #26323e;
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .4);
}