/*
 * ATT Elementor Bridge — design tokens (foundation).
 *
 * Sottoinsieme di docs/design_handoff_attelbrg/DESIGN-TOKENS.md, base del CSS
 * bridge-owned. In M1 il file è creato ma NON enqueued (i Product dynamic tag
 * emettono valori, non markup stilato): l'enqueue parte da M2 con i primi widget.
 *
 * Font: N27 NON è bundlato (licenza commerciale). Qui solo lo stack di fallback;
 * il tema carica N27 se licenziato. Lato è disponibile via Google Fonts (OFL).
 */

:root {
	/* Superfici e testo (tema dark di default). */
	--attelbrg-color-bg: rgb(25, 25, 25);
	--attelbrg-color-surface: rgb(38, 38, 38);
	--attelbrg-color-surface-muted: rgb(63, 68, 67);
	--attelbrg-color-surface-raised: rgb(85, 89, 88);
	--attelbrg-color-text: rgb(245, 245, 244);
	--attelbrg-color-text-strong: rgb(255, 255, 255);
	--attelbrg-color-text-muted: rgb(192, 193, 192);
	--attelbrg-color-text-disabled: rgb(149, 152, 150);
	--attelbrg-color-border: rgb(85, 89, 88);

	/* Superfici chiare (campo di ricerca su fondo scuro, sezioni light). */
	--attelbrg-color-on-white-bg: rgb(255, 255, 255);
	--attelbrg-color-on-white-text: rgb(38, 38, 38);
	--attelbrg-color-on-white-caption: rgb(85, 89, 88);

	/* Colori connessione (firma FAQ: bordo/angolo card, separatore topic). */
	--attelbrg-color-conn-obd: rgb(0, 194, 135);
	--attelbrg-color-conn-bench: rgb(29, 134, 218);
	--attelbrg-color-conn-boot: rgb(149, 48, 192);

	/* Accent brand. */
	--attelbrg-color-accent: rgb(255, 238, 0);
	--attelbrg-color-accent-hover: rgb(255, 243, 82);
	--attelbrg-color-accent-pressed: rgb(255, 250, 184);
	--attelbrg-color-accent-text: rgb(63, 68, 67);
	--attelbrg-color-accent-border-focus: rgb(173, 162, 0);

	/* Tipografia. N27 solo se licenziato dal tema; fallback documentato. */
	--attelbrg-font-heading: "n27", "Archivo", "Helvetica Neue", Arial, sans-serif;
	--attelbrg-font-body: "Lato", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--attelbrg-weight-body: 400;
	--attelbrg-weight-body-bold: 700;
	--attelbrg-weight-heading: 500;

	/* Scala corpo (desktop). */
	--attelbrg-font-body-xl: 20px;
	--attelbrg-font-body-l: 18px;
	--attelbrg-font-body-m: 16px;
	--attelbrg-font-body-s: 14px;
	--attelbrg-font-body-xs: 12px;

	/* Spacing. */
	--attelbrg-space-xs: 4px;
	--attelbrg-space-sm: 8px;
	--attelbrg-space-md: 16px;
	--attelbrg-space-lg: 24px;
	--attelbrg-space-xl: 40px;
	--attelbrg-space-2xl: 64px;

	/* Radius. */
	--attelbrg-radius-sm: 2px;
	--attelbrg-radius-md: 4px;
	--attelbrg-radius-lg: 8px;
	--attelbrg-radius-xl: 12px;
	--attelbrg-radius-card: 16px;
	--attelbrg-radius-pill: 64px;

	/* Bordi. */
	--attelbrg-border-width-hairline: 1px;
	--attelbrg-border-width-emphasis: 2px;
}

/*
 * Accessibilità (M6, WCAG 2.1 AA). Foundation: questo file è caricato come
 * dipendenza di tutti i CSS bridge (catalog/academy/dealer), quindi le regole
 * sotto valgono per ogni widget.
 *
 * AC45 — focus visibile su ogni elemento interattivo dei componenti bridge.
 * Usa il token accent-border-focus (giallo scuro) su offset, indipendente dal
 * tema chiaro/scuro.
 */
[class*="attelbrg-"] a:focus-visible,
[class*="attelbrg-"] button:focus-visible,
[class*="attelbrg-"] input:focus-visible,
[class*="attelbrg-"] select:focus-visible,
[class*="attelbrg-"] textarea:focus-visible,
[class*="attelbrg-"] [tabindex]:focus-visible {
	outline: var(--attelbrg-border-width-emphasis) solid var(--attelbrg-color-accent-border-focus);
	outline-offset: 2px;
}

/*
 * AC52 — prefers-reduced-motion: nessuna animazione/transizione/parallax nei
 * widget bridge per chi richiede meno movimento.
 */
@media (prefers-reduced-motion: reduce) {
	[class*="attelbrg-"],
	[class*="attelbrg-"] * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}