/* =====================================================================
   ALLOMENS · THEME LAYER  (cross-app)
   ---------------------------------------------------------------------
   Va incluso DOPO style.css su ogni pagina.
   NON tocca markup, testi o stringhe: rimappa i token CSS che style.css
   già usa (palette base + set "shell" della dashboard) e ristila i
   controlli base. Cambia solo l'aspetto.

   Tema: l'app usa  html.theme-light / body.theme-light  (theme-manager.js).
   Base = scuro; .theme-light = chiaro.

   Palette guida: #000000 · #FFFFFF · #005288 (blu) · #A7A9AC (grigio).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- 1 · TOKEN BASE + SHELL (scuro) ---------- */
:root{
  /* base */
  --bg:#000000;
  --bg-soft:#0A0A0B;
  --panel:#0C0D0F;
  --panel-2:#111315;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text:#FFFFFF;
  --muted:#A7A9AC;
  --muted-2:rgba(167,169,172,.60);
  --accent:#FFFFFF;
  --accent-soft:rgba(255,255,255,.07);
  --good:#2E8BD0;
  --warn:#D9A441;
  --bad:#E0726E;
  --shadow:0 30px 90px rgba(0,0,0,.55);
  --radius:18px;

  /* shell della dashboard */
  --shell-bg-a:#000000;
  --shell-bg-b:#050608;
  --shell-glass:rgba(10,11,13,.82);
  --shell-glass-2:rgba(14,16,20,.74);
  --shell-accent:rgba(46,139,208,.38);
  --shell-accent-2:rgba(0,82,136,.20);
  --shell-text-soft:rgba(255,255,255,.72);
  --shell-surface-dark:rgba(10,11,13,.92);
  --shell-surface-dark-2:rgba(14,16,20,.88);
  --shell-border-dark:rgba(255,255,255,.10);

  /* accenti del design system */
  --signal:#2E8BD0;        /* blu accento su nero (link, focus, positivo) */
  --signal-fill:#005288;   /* blu pieno per i bottoni primari */
  --flow:#7FBCE6;
  --mid:#A7A9AC;
  --glow:rgba(0,82,136,.30);

  --fd:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --fb:'Inter',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------- 1b · TOKEN BASE + SHELL (chiaro) ---------- */
html.theme-light, body.theme-light{
  --bg:#FFFFFF;
  --bg-soft:#F4F5F6;
  --panel:#FFFFFF;
  --panel-2:#F6F7F8;
  --line:rgba(0,0,0,.10);
  --line-strong:rgba(0,0,0,.18);
  --text:#000000;
  --muted:#5F6163;
  --muted-2:rgba(0,0,0,.40);
  --accent:#000000;
  --accent-soft:rgba(0,0,0,.05);
  --good:#005288;
  --warn:#8A6200;
  --bad:#C0392B;
  --shadow:0 24px 70px rgba(0,40,70,.12);

  --shell-bg-a:#FFFFFF;
  --shell-bg-b:#F1F4F7;
  --shell-glass:rgba(255,255,255,.90);
  --shell-glass-2:rgba(246,248,250,.88);
  --shell-accent:rgba(0,82,136,.30);
  --shell-accent-2:rgba(0,82,136,.14);
  --shell-text-soft:rgba(0,0,0,.62);
  --shell-surface-light:rgba(255,255,255,.96);
  --shell-surface-light-2:rgba(247,250,253,.94);
  --shell-border-light:rgba(0,0,0,.10);
  --shell-text-light-soft:rgba(0,0,0,.60);

  --signal:#005288;
  --signal-fill:#005288;
  --flow:#2E8BD0;
  --mid:#7A7C7F;
  --glow:rgba(0,82,136,.10);
}

/* ---------- 2 · BASE ---------- */
body{
  font-family:var(--fb);
  background:var(--bg);
  color:var(--text);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(110% 60% at 50% -6%,var(--glow),transparent 55%);
}
.container,.dashboard-shell,.onboarding-container,.history-container,.app-shell{position:relative;z-index:1}

h1,h2,h3,.card h2{font-family:var(--fd);letter-spacing:-.02em}

/* ---------- 3 · CONTROLLI ---------- */
input[type="text"],input[type="email"],input[type="number"],input[type="password"],select,textarea{
  background:var(--bg-soft);
  border:1px solid var(--line-strong);
  border-radius:12px;
  color:var(--text);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--glow);
}

/* bottone primario → blu pieno, testo bianco (override deliberato) */
button.primary{
  background:var(--signal-fill) !important;
  color:#fff !important;
  border-color:transparent !important;
}
body.theme-light button.primary{color:#fff !important;}

/* ---------- 4 · SMOOTHNESS (micro-interazioni morbide) ---------- */
button,.button-like,.button-link,a,
input,select,textarea,.card{
  transition:background-color .22s cubic-bezier(.22,.61,.36,1),
             border-color .22s cubic-bezier(.22,.61,.36,1),
             color .2s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s cubic-bezier(.22,.61,.36,1),
             transform .18s cubic-bezier(.22,.61,.36,1),
             opacity .22s ease;
}
button:hover,.button-like:hover{transform:translateY(-1px)}
button:active,.button-like:active{transform:translateY(1px)}
tbody tr{transition:background-color .2s ease}
tbody tr:hover{background:var(--accent-soft)}

/* ---------- 5 · FOCUS ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px;border-radius:8px;
}

@media (prefers-reduced-motion: reduce){
  button,.button-like,.button-link,a,input,select,textarea,.card,tbody tr{transition:none}
  button:hover,.button-like:hover,button:active,.button-like:active{transform:none}
}