/*
 * Design tokens — AI WhiteBox control plane v3, su immagine coordinata Lynx Group.
 * Valori dal design system Lynx (tokens.json, pacchetto del 25/09/2026): navy, scala
 * dei blu, grigi, Roboto, ombre, raggi. Gli STATI (ok / attenzione / bloccato) il
 * sistema Lynx non li ha: sono una proposta di aggiunta, dichiarata in DIREZIONE.md.
 *
 * I nomi delle variabili v2 (forest-*, mint-*, neutral-*) restano come alias, così
 * ogni pagina scritta sulla v2 si ricolora da sola. Nel codice nuovo si usano i nomi
 * Lynx (--navy, --blue-*, --text, ...) o gli alias semantici (--text-strong, ...).
 */
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Lynx: marca ---- */
  --navy: #002b58;
  --navy-deep: #000d1c;
  --navy-mark: #193153;
  --navy-hover: #0a3a70;      /* aggiunta: hover del bottone pieno */
  --blue-800: #315e8e;
  --blue-700: #517dac;
  --blue-600: #5b75ae;
  --blue-500: #5c9fd6;
  --blue-400: #7099c4;
  --blue-100: #e8f1fa;        /* aggiunta: tinta di selezione */
  --blue-50:  #f3f8fd;

  /* ---- Lynx: grigi ---- */
  --text: #5e5e5e;
  --text-muted-lynx: #797979; /* 4,35:1 — solo da 14px in su */
  --eyebrow: #919191;         /* 3,15:1 — solo occhielli, mai testo */
  --line: #d6d6d6;
  --line-soft: #e6e6e6;
  --surface: #ffffff;
  --surface-canvas: #ebebeb;
  --surface-soft: #f6f6f6;
  --surface-panel: #f2f4f8;
  --ink: #1f1f1f;

  /* ---- Stati — PROPOSTA di aggiunta al DS Lynx (freddi e spenti, mai fluo) ---- */
  --ok-700: #1f6b4a;  --ok-500: #2f8a61;  --ok-100: #e6f3ec;
  --warn-800: #7a4f08; --warn-600: #b27612; --warn-500: #d8942a; --warn-100: #fbf1de;
  --stop-700: #9e2f2a; --stop-500: #c9453d; --stop-100: #fbe9e7;

  /* ---- Alias v2 → Lynx (non usarli nel codice nuovo) ---- */
  --forest-950: var(--navy-deep);
  --forest-900: var(--navy);
  --forest-800: var(--navy-hover);
  --forest-700: var(--blue-800);
  --forest-600: var(--blue-700);
  --forest-500: var(--blue-600);
  --mint-700: var(--blue-800);
  --mint-600: var(--blue-700);
  --mint-500: var(--blue-500);
  --mint-400: var(--blue-400);
  --mint-300: #a9c7e6;
  --mint-200: #cfe0f1;
  --mint-100: var(--blue-100);
  --mint-50:  var(--blue-50);
  --ink-950: var(--navy-deep);
  --neutral-900: #2b2b2b;
  --neutral-800: #444444;
  --neutral-700: var(--text);
  --neutral-600: var(--text);
  --neutral-500: var(--text-muted-lynx);
  --neutral-400: #a8a8a8;
  --neutral-300: var(--line);
  --neutral-200: var(--line-soft);
  --neutral-100: var(--surface-soft);
  --neutral-50:  var(--surface-panel);
  --white: #ffffff;
  --success-600: var(--ok-700);
  --success-500: var(--ok-500);
  --success-100: var(--ok-100);
  --warning-700: var(--warn-800);
  --warning-600: var(--warn-600);
  --warning-500: var(--warn-500);
  --warning-100: var(--warn-100);
  --danger-600:  var(--stop-700);
  --danger-500:  var(--stop-500);
  --danger-100:  var(--stop-100);
  --info-600:    var(--blue-800);
  --info-500:    var(--blue-500);
  --info-100:    var(--blue-100);

  /* ---- Alias semantici ---- */
  --text-strong:   var(--navy);
  --text-body:     var(--text);
  --text-muted:    var(--text);
  --text-subtle:   var(--text-muted-lynx);
  --text-inverse:  var(--white);
  --text-brand:    var(--navy);
  --text-accent:   var(--blue-800);
  --text-link:     var(--blue-800);

  --surface-page:    var(--surface-panel);
  --surface-card:    var(--surface);
  --surface-sunken:  var(--surface-soft);
  --surface-inverse: var(--navy);
  --surface-brand:   var(--surface);
  --surface-accent-soft: var(--blue-100);
  --surface-overlay: rgba(0, 13, 28, 0.42);

  --border-subtle:  var(--line-soft);
  --border-default: var(--line);
  --border-strong:  #bdbdbd;
  --border-brand:   var(--navy);
  --border-accent:  var(--blue-500);

  --action-primary:        var(--navy);
  --action-primary-hover:  var(--navy-hover);
  --action-primary-active: var(--navy-deep);
  --action-accent:         var(--blue-500);
  --action-accent-hover:   var(--blue-700);
  --action-accent-active:  var(--blue-800);
  --focus-ring:            var(--blue-500);

  /* ---- Tipografia: Roboto e basta ---- */
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Roboto", system-ui, sans-serif; /* niente monospazio: cifre tabellari */
  --font-code:    ui-monospace, "SFMono-Regular", Menlo, monospace; /* solo JSON e id tecnici */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 500;
  --weight-bold:     700;
  --weight-extra:    900;

  --text-2xs: 0.75rem;
  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.25rem;
  --text-xl:  1.625rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.625rem;
  --text-4xl: 3.5rem;
  --text-5xl: 4.5rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.55;
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;

  --display-font: var(--font-display);
  --display-weight: var(--weight-bold);
  --heading-font: var(--font-display);
  --heading-weight: var(--weight-bold);
  --body-font: var(--font-sans);
  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-relaxed);
  --eyebrow-font: var(--font-sans);
  --eyebrow-weight: var(--weight-medium);
  --eyebrow-tracking: var(--tracking-caps);
  --eyebrow-size: var(--text-2xs);

  /* ---- Spazi, raggi, ombre ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --radius-xs:  4px;
  --radius-sm:  7px;
  --radius-md:  10px;
  --radius-lg:  20px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  --shadow-xs:  0 1px 2px rgba(0, 43, 88, 0.06);
  --shadow-sm:  0 8px 24px -12px rgba(0, 43, 88, 0.20);
  --shadow-md:  0 2px 56px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 26px 78px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 30px 90px rgba(0, 13, 28, 0.22);
  --shadow-focus: 0 0 0 3px rgba(92, 159, 214, 0.55);
  --ring-brand:   0 0 0 3px rgba(0, 43, 88, 0.14);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --duration-fill: 1100ms;

  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1240px;
  --container-xl: 1360px;
  --header-h: 68px;

  --sidebar-w: 248px;
  --drawer-w: 560px;
  --row-h: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-fill: 0ms; }
}