/* Hallmark · system: argus-console-radar · scope: component/system (liste e
 * schede, non landing) · genre: modern-minimal · theme: custom "Console radar"
 * · paper-band: light · display-style: grotesk-sans · accent-hue: cool-blue
 * · pre-emit critique: P5 H4 E5 S4 R5 V4
 *
 * Argus — token della direzione visiva.
 *
 * Un solo posto in cui vivono colore, tipografia, spaziatura, raggi, movimento
 * e livelli. Il resto del foglio usa `var(--…)` e non nomina mai un valore:
 * è ciò che impedisce alla palette di derivare a ogni modifica.
 *
 * Direzione: un **radar operativo**, non un bollettino. Genere modern-minimal
 * (scuola Linear/Stripe/GitHub), tono utilitaristico e preciso: chrome neutro,
 * un solo blu istituzionale per l'azione, e il colore che è **informazione**,
 * non decorazione. La provenienza (ARG-035) ha due tinte dedicate, distinte
 * dal blu d'azione e mai usate per altro; ogni stato porta anche una parola.
 *
 * Contrasti verificati (WCAG 2.1) sul paper (#fcfcfc), coppie reali scelte qui:
 *   ink 17.3:1 · ink-2 12.4:1 · slate 5.8:1 · muted 5.1:1
 *   blu azione 7.1:1 (bianco su di esso 7.3:1) · blu forte 9.9:1
 *   TED 8.2:1 · Enti 5.0:1
 *   ok 6.3:1 · attenzione 4.8:1 · errore 6.4:1
 *   rule-strong 3.6:1 (bordo dei controlli, soglia UI ≥ 3:1)
 * Il colore non è mai l'unico segnale: ogni stato e ogni provenienza porta
 * anche una parola.
 */

:root {
  /* --- Superfici ---------------------------------------------------------- */
  --color-paper: oklch(99% 0 0); /* #fcfcfc — sfondo della pagina */
  --color-paper-2: oklch(97% 0.003 258); /* #f5f6f8 — hover, testata */
  --color-paper-3: oklch(94.5% 0.004 258); /* #eceef1 — incassature, chip */
  --color-surface: oklch(100% 0 0); /* #ffffff — schede, moduli */

  /* --- Filetti e bordi ---------------------------------------------------- */
  --color-rule: oklch(90% 0.004 258); /* #dcdee1 — separatori */
  --color-rule-2: oklch(84% 0.005 258); /* #cdd0d4 — bordi decorativi */
  --color-rule-strong: oklch(62% 0.01 258); /* #82868c — bordo dei controlli */
  --rule-hairline: 1px solid var(--color-rule);
  --rule-control: 1px solid var(--color-rule-strong);

  /* --- Testo -------------------------------------------------------------- */
  --color-ink: oklch(21% 0.012 264); /* #15181e */
  --color-ink-2: oklch(32% 0.014 262); /* #2f333a */
  --color-neutral: oklch(50% 0.018 258); /* #5d646e — meta */
  --color-muted: oklch(53% 0.016 258); /* #656b74 — assenze */
  --color-on-ink: var(--color-paper);

  /* --- Azione (un solo blu istituzionale) --------------------------------- *
   * Vive **solo** su testo interattivo, focus e riempimenti: mai sulla
   * provenienza, così a piccolo formato non si confonde con il TED. */
  --color-action: oklch(46% 0.15 258); /* #1654a9 */
  --color-action-strong: oklch(38% 0.14 258); /* #013e8b — link e focus */
  --color-action-weak: oklch(95% 0.02 258); /* #e7eefb — superfici tinte */
  --color-action-ink: oklch(100% 0 0);

  /* Compatibilità coi nomi storici: il resto del foglio usa `--color-accent`. */
  --color-accent: var(--color-action);
  --color-accent-strong: var(--color-action-strong);
  --color-accent-weak: var(--color-action-weak);
  --color-accent-ink: var(--color-action-ink);

  /* --- Provenienza (scheletro di ARG-035: un segnale, non una rotta) ------ *
   * Due tinte stabili mai riusate per altro. Il TED è indaco a ΔH 38° dal blu
   * d'azione: a 4px di rail e a piccolo badge non si confondono. */
  --color-ted: oklch(44% 0.17 296); /* #5e34a3 */
  --color-ted-weak: oklch(95% 0.025 296); /* #efe9fb */
  --color-ente: oklch(52% 0.10 195); /* #007a7b */
  --color-ente-weak: oklch(95% 0.03 195); /* #e2f1f0 */

  /* --- Famiglia di contenuto (parola, non chip) --------------------------- */
  --color-family-gara: oklch(42.3% 0.111 255); /* #1d4e89 */
  --color-family-gara-weak: oklch(94% 0.018 253);
  --color-family-atto: oklch(47.5% 0.059 86); /* #6b5a34 */
  --color-family-atto-weak: oklch(93.8% 0.014 85);

  /* --- Segnali ------------------------------------------------------------ *
   * Lo stato *pendente* non è un errore: è normale e atteso, quindi va in
   * ambra. Il rosso resta per ciò che è davvero rotto. Prima di questo lavoro
   * le due cose condividevano lo stesso colore. */
  --color-attention: oklch(55% 0.12 72); /* #9c6400 */
  --color-attention-weak: oklch(96% 0.035 80); /* #fbf0dc */
  --color-error: oklch(50% 0.17 27); /* #b02b27 */
  --color-error-weak: oklch(95% 0.02 27); /* #fbe9e7 */
  --color-success: oklch(47% 0.12 152); /* #0a6d37 */
  --color-success-weak: oklch(95% 0.03 152); /* #e3f2e8 */

  /* Anello di focus: distinto dal blu d'azione, ≥ 3:1 su ogni superficie. */
  --color-focus: var(--color-action-strong);

  /* --- Tipografia --------------------------------------------------------- *
   * Due famiglie, zero serif: una grotesk per l'interfaccia e una mono per i
   * soli identificatori e i numeri. Il ripiego di sistema viene prima del
   * generico, così offline la pagina resta leggibile senza saltare a un serif. */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs: 0.75rem; /* 12px — micro-etichette */
  --text-sm: 0.8125rem; /* 13px — metadati, asse destro */
  --text-base: 1rem; /* 16px — corpo, mai sotto */
  --text-h2: 1rem; /* 16px — oggetto di riga */
  --text-lg: 1.25rem; /* 20px */
  --text-h1: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem); /* 24–28px */

  --leading-display: 1.25;
  --leading-body: 1.55;
  --measure: 72ch;

  /* --- Spaziatura: scala 4 pt --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Larghezza dell'asse di scansione a destra della riga (desktop). */
  --riga-asse: 15rem;

  /* --- Raggi -------------------------------------------------------------- */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-pill: 999px;
  --radius-focus: 3px;

  /* --- Movimento: solo transform e opacity -------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;

  /* --- Bersagli di tocco -------------------------------------------------- */
  --target-min: 44px;

  /* --- Livelli ------------------------------------------------------------ */
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-toast: 50;
}

/* --- Focus: visibile, istantaneo, mai animato ----------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus {
  outline: none; /* rimpiazzato subito sotto: mai rimosso senza sostituto */
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-focus);
}

/* Lo scorrimento è fluido quando si segue un'ancora (lo skip link), e
   istantaneo per chi ha ridotto il movimento — la regola sotto lo spegne. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Reduced motion: una politica dichiarata, non l'assenza di movimento -- *
 * Il movimento funzionale (pulsazione dello scheletro) resta ma rallenta; lo
 * spostamento collassa. L'anello di focus non è soggetto alla regola. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}