/* GENERATO da frontend/scripts/build-tokens.mjs: non modificare a mano. */
/* ==========================================================
   Influencee — tokens.css
   Valori grezzi (palette) + token semantici (light / dark)
   ========================================================== */

:root {
  /* --- Palette grezza: NON usare nei componenti --- */
  --grey-0:   #FFFFFF;  --grey-50:  #F5F5F5;  --grey-100: #EBEBEB;
  --grey-200: #DADADA;  --grey-300: #C2C2C2;  --grey-400: #A3A3A3;
  --grey-500: #888888;  --grey-600: #6B6B6B;  --grey-700: #4A4A4A;
  --grey-800: #2A2A2A;  --grey-900: #1A1A1A;  --grey-950: #0A0A0A;

  --pink-50:  #FDE7F2;  --pink-400: #FF3D9E;  --pink-500: #E6007E;
  --pink-600: #CC0066;  --pink-950: #3A0A22;

  --acid-400: #C8FF2E;  --acid-700: #3D6B00;  --acid-950: #16260A;

  --amber-text-l: #B54708; --amber-fill-l: #FEF0C7; --amber-text-d: #FDB022; --amber-fill-d: #2A1D05;
  --red-text-l:   #B42318; --red-fill-l:   #FEE4E2; --red-text-d:   #F97066; --red-fill-d:   #2E0F0C;

  /* --- Spaziatura (base 4) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* --- Misure fisse --- */
  --sidebar-w: 240px;  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;    --tabbar-h: 56px;
  --detail-w: 480px;   --drawer-w: 480px;
  --modal-sm: 480px;   --modal-md: 640px;  --modal-lg: 880px;
  --content-max: 1280px; --reading-max: 680px;
  --control-sm: 32px;  --control-md: 40px; --control-lg: 48px;
  --row-dense: 40px;   --row: 48px;
  --touch-min: 44px;

  /* --- Raggi --- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px;

  /* --- Tipografia --- */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --text-display: 40px/44px var(--font-display);
  --text-h1: 600 28px/36px var(--font-ui);
  --text-h2: 600 20px/28px var(--font-ui);
  --text-h3: 600 16px/24px var(--font-ui);
  --text-body: 400 14px/20px var(--font-ui);
  --text-body-lg: 400 16px/24px var(--font-ui);
  --text-small: 400 12px/16px var(--font-ui);
  --text-num: 500 14px/20px var(--font-ui);
  --text-num-lg: 600 24px/28px var(--font-ui);

  /* --- Movimento --- */
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* --- Focus --- */
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent);
}

/* ---------- TEMA LIGHT (default) ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-page:        var(--grey-0);
  --surface-1:      var(--grey-50);
  --surface-2:      var(--grey-0);
  --surface-3:      var(--grey-0);
  --border:         var(--grey-200);
  --border-strong:  var(--grey-950);
  --text-primary:   var(--grey-950);
  --text-secondary: var(--grey-600);
  --text-disabled:  var(--grey-400);
  --text-on-accent: var(--grey-0);

  --accent:         var(--pink-500);
  --accent-hover:   var(--pink-600);
  --accent-text:    var(--pink-600);   /* link e testo rosa */
  --accent-soft:    var(--pink-50);    /* selezione, riga attiva */

  --acid:           var(--acid-400);   /* riempimento, badge autenticato */
  --acid-text:      var(--acid-700);   /* testo verde */
  --acid-soft:      #F3FFD6;

  --success-text: var(--acid-700);  --success-fill: var(--acid-400);
  --warning-text: var(--amber-text-l); --warning-fill: var(--amber-fill-l);
  --error-text:   var(--red-text-l);   --error-fill:   var(--red-fill-l);
  --info-text:    var(--grey-700);     --info-fill:    var(--grey-100);

  --shadow-2: 0 1px 2px rgba(10,10,10,.06);
  --shadow-3: 0 8px 24px rgba(10,10,10,.12);
  --shadow-4: 0 24px 48px rgba(10,10,10,.18);
  --overlay:  rgba(10,10,10,.4);

  --chart-1: var(--pink-500); --chart-2: var(--grey-950);
  --chart-3: var(--grey-500); --chart-4: var(--grey-300);
  --chart-grid: var(--grey-200);
  --skeleton: var(--grey-100);
  --thumb-border: transparent;
}

/* ---------- TEMA DARK ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:        var(--grey-950);
  --surface-1:      var(--grey-900);
  --surface-2:      var(--grey-800);
  --surface-3:      var(--grey-800);
  --border:         var(--grey-800);
  --border-strong:  var(--grey-300);
  --text-primary:   var(--grey-50);
  --text-secondary: var(--grey-400);
  --text-disabled:  var(--grey-600);
  --text-on-accent: var(--grey-0);

  --accent:         var(--pink-500);
  --accent-hover:   var(--pink-400);
  --accent-text:    var(--pink-400);
  --accent-soft:    var(--pink-950);

  --acid:           var(--acid-400);
  --acid-text:      var(--acid-400);
  --acid-soft:      var(--acid-950);

  --success-text: var(--acid-400);     --success-fill: var(--acid-950);
  --warning-text: var(--amber-text-d); --warning-fill: var(--amber-fill-d);
  --error-text:   var(--red-text-d);   --error-fill:   var(--red-fill-d);
  --info-text:    var(--grey-300);     --info-fill:    var(--grey-800);

  --shadow-2: none;
  --shadow-3: 0 0 0 1px var(--grey-700);
  --shadow-4: 0 0 0 1px var(--grey-700);
  --overlay:  rgba(0,0,0,.6);

  --chart-1: var(--pink-500); --chart-2: var(--grey-50);
  --chart-3: var(--grey-500); --chart-4: var(--grey-700);
  --chart-grid: var(--grey-800);
  --skeleton: var(--grey-800);
  --thumb-border: var(--grey-800);
}

/* Segue il sistema se l'utente non ha scelto: il blocco lo genera scripts/build-tokens.mjs dal tema dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page:        var(--grey-950);
    --surface-1:      var(--grey-900);
    --surface-2:      var(--grey-800);
    --surface-3:      var(--grey-800);
    --border:         var(--grey-800);
    --border-strong:  var(--grey-300);
    --text-primary:   var(--grey-50);
    --text-secondary: var(--grey-400);
    --text-disabled:  var(--grey-600);
    --text-on-accent: var(--grey-0);
  
    --accent:         var(--pink-500);
    --accent-hover:   var(--pink-400);
    --accent-text:    var(--pink-400);
    --accent-soft:    var(--pink-950);
  
    --acid:           var(--acid-400);
    --acid-text:      var(--acid-400);
    --acid-soft:      var(--acid-950);
  
    --success-text: var(--acid-400);     --success-fill: var(--acid-950);
    --warning-text: var(--amber-text-d); --warning-fill: var(--amber-fill-d);
    --error-text:   var(--red-text-d);   --error-fill:   var(--red-fill-d);
    --info-text:    var(--grey-300);     --info-fill:    var(--grey-800);
  
    --shadow-2: none;
    --shadow-3: 0 0 0 1px var(--grey-700);
    --shadow-4: 0 0 0 1px var(--grey-700);
    --overlay:  rgba(0,0,0,.6);
  
    --chart-1: var(--pink-500); --chart-2: var(--grey-50);
    --chart-3: var(--grey-500); --chart-4: var(--grey-700);
    --chart-grid: var(--grey-800);
    --skeleton: var(--grey-800);
    --thumb-border: var(--grey-800);
  }
}

/* ---------- Base ---------- */
html { font: var(--text-body); color: var(--text-primary); background: var(--bg-page);
       font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.num, td.num, .stat-value { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Movimento ridotto: niente animazioni né transizioni di posizione; restano le dissolvenze di colore da 120ms.
   PERCHÉ non `transform: none` (come in tokens.md): azzererebbe anche le posizioni statiche (pomello del toggle,
   centratura dei tooltip), non solo il movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 120ms !important;
    transition-property: color, background-color, border-color, opacity !important; scroll-behavior: auto !important; }
}

/* ---------- Badge di livello dato ---------- */
.tier { display:inline-flex; align-items:center; gap:var(--space-1); height:20px; padding:0 var(--space-2);
        border-radius:var(--radius-sm); font:var(--text-small); font-weight:500; }
.tier--declared      { background:var(--text-primary); color:var(--bg-page); }
.tier--authenticated { background:var(--acid);         color:var(--grey-950); }
.tier--observed      { background:var(--info-fill);    color:var(--info-text); }
.tier--inferred      { background:transparent; color:var(--text-secondary); border:1px dashed var(--border-strong); }