/* ============================================================================
   TOKENS — unico set di design token dell'app.
   ----------------------------------------------------------------------------
   Dichiarazione dei layer: l'ordine qui governa la cascade per TUTTO il CSS
   dell'app (base < components < views < utilities). Nessuna regola vive
   fuori da un layer; `!important` è riservato al layer utilities.

   Estetica: piana, "operations board". Superfici piatte con hairline border,
   raggi piccoli, nessun gradiente decorativo, nessun glow. Il colore esiste
   solo dove è semantico: stato treno, errore, blocco.
   ========================================================================== */
@layer reset, tokens, base, components, views, utilities;

@layer tokens {
  :root {
    /* ── Tipografia ─────────────────────────────────────────────── */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 26px;
    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* ── Spazi ──────────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* ── Raggi (piccoli: niente arrotondamenti pesanti) ─────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* ── Altezze ────────────────────────────────────────────────── */
    --rail-w: 232px;
    --rail-w-collapsed: 64px;
    --topbar-h: 56px;
    --nav-h: 56px;

    /* ── Focus (visibile, WCAG) ─────────────────────────────────── */
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  }

  /* ── Tema chiaro ──────────────────────────────────────────────── */
  :root,
  :root[data-theme="light"] {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-sunken: #eceef1;
    --surface-hover: #f7f8fa;
    --border: #d9dce1;
    --border-strong: #b9bec7;
    --text: #1c1e21;
    --text-muted: #5c636e;
    --text-faint: #8a919c;
    --brand: #c8102e;
    --brand-hover: #a80d26;
    --brand-contrast: #ffffff;
    --brand-soft: #fbe9ec;
    --success: #1e7d43;
    --success-soft: #e3f2e9;
    --warning: #9a6700;
    --warning-soft: #fdf3dd;
    --danger: #c0262d;
    --danger-soft: #fbe7e7;
    --info: #1f5fa8;
    --info-soft: #e7f0fa;
    --focus: #1f5fa8;
    --shadow-xs: 0 1px 2px rgba(16, 18, 20, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 18, 20, 0.12);
    color-scheme: light;
  }

  /* ── Tema scuro: automatico e/o esplicito ────────────────────── */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #131417;
      --surface: #1c1e22;
      --surface-sunken: #232529;
      --surface-hover: #26282d;
      --border: #34373d;
      --border-strong: #4a4e56;
      --text: #e8eaed;
      --text-muted: #a3a9b3;
      --text-faint: #737a85;
      --brand: #e02643;
      --brand-hover: #f0405c;
      --brand-contrast: #ffffff;
      --brand-soft: #3a2026;
      --success: #4cc07a;
      --success-soft: #1d3226;
      --warning: #e0a63a;
      --warning-soft: #382d14;
      --danger: #ef5a60;
      --danger-soft: #3a2022;
      --info: #6ea8e8;
      --info-soft: #1e2c3d;
      --focus: #6ea8e8;
      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #131417;
    --surface: #1c1e22;
    --surface-sunken: #232529;
    --surface-hover: #26282d;
    --border: #34373d;
    --border-strong: #4a4e56;
    --text: #e8eaed;
    --text-muted: #a3a9b3;
    --text-faint: #737a85;
    --brand: #e02643;
    --brand-hover: #f0405c;
    --brand-contrast: #ffffff;
    --brand-soft: #3a2026;
    --success: #4cc07a;
    --success-soft: #1d3226;
    --warning: #e0a63a;
    --warning-soft: #382d14;
    --danger: #ef5a60;
    --danger-soft: #3a2022;
    --info: #6ea8e8;
    --info-soft: #1e2c3d;
    --focus: #6ea8e8;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}