/*
  FX Hub — foglio base (M2, docs/v2.3/20 §10).
  Token di colore canonici (sistema FX), reset minimale e tipografia.
  I componenti della shell (login, sidebar, topbar, griglia) vivono in shell.css.
*/

/*
  SET DI TOKEN UNICO (canonico). Valori allineati alla styleguide / fx-kit:
  superfici, raggi (scala 6/8/12), ombre e tint vivono tutti qui. fx-kit.css NON
  ridefinisce più :root né scopa nulla sotto .fx-module — shell e moduli nativi
  leggono da questo stesso set.
*/
:root {
  /* Superfici e testo */
  --bg: #FBFBFC;
  --bg-app: #F1F2F4;
  --surface: #F4F5F7;
  --surface-2: #FFFFFF;       /* card / input / modale bianchi (styleguide) */
  --border: #E2E4E8;
  --border-strong: #D2D6DC;
  --text: #16181D;
  --text-muted: #5C6470;
  --text-subtle: #8A909B;     /* terzo livello: placeholder, meta, header tabella */
  --black: #0B0C0E;
  --white: #FFFFFF;

  /* Brand */
  --primary: #DD5B0C;
  --primary-hover: #C24E08;
  --primary-tint: #FCEEE3;    /* alone focus / sfondo callout arancio (ex --primary-soft) */

  /* Accenti */
  --accent-yellow: #FFD000; /* giallo netto: accento su scuro + alert, testo nero */
  --petrol: #1B5A66;        /* accento 2 / grafici, testo bianco */
  --gray-dark: #2F343B;     /* testo bianco */
  --gray-mid: #C9CDD3;      /* testo nero */

  /* Semantici + relativi tint (badge/callout) */
  --error: #DC2626;   --error-tint: #FBEAEA;
  --success: #15803D; --success-tint: #E7F2EB;
  --info: #0284C7;    --info-tint: #E3F1F9;
  --yellow: #FFD000;  --yellow-tint: #FFF6CC;
  --warning: var(--primary);
  --alert: var(--accent-yellow);

  /* Tipografia */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Raggi (scala unica) */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;

  /* Spaziatura (scala unica) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Ombre */
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, .05);
  --shadow-md: 0 4px 14px rgba(22, 24, 29, .08);
  --shadow-lg: 0 18px 50px rgba(22, 24, 29, .18);

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --gap: 20px;

  color-scheme: light;
}

/* ----------------------------- Reset ----------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

button { font-family: inherit; }

img, svg { display: block; max-width: 100%; }

ul { margin: 0; padding: 0; list-style: none; }

/* Focus visibile = ARANCIONE (non giallo: contrasto), §10 sistema colore. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Boot: nasconde tutto finché app.js non decide login↔shell, evitando flash. */
html[data-fx-state="boot"] body { visibility: hidden; }

[hidden] { display: none !important; }

/* --------------------------- Tipografia --------------------------- */

.fx-muted { color: var(--text-muted); }
.fx-display { font-family: var(--font-display); }

/* ---------------------------- Bottoni ----------------------------- */
/* .fx-btn (+ varianti primary/secondary/danger/ghost/sm/block) è definito UNA
   sola volta nel kit (fx-kit.css), ora globale. Qui non si duplica più. */

/* --------------------------- Icon button -------------------------- */

.fx-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease;
}
.fx-iconbtn:hover { background: var(--surface); }