/**
 * ═══════════════════════════════════════════════════════════════════════════
 * Sindesi Design Tokens — v1.1 (materialized in Sindesi Theme v0.2.0)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * v0.2.0 (18/07/2026) — Materializzazione completa Foundation + Semantic
 * dal documento `sindesi-design-tokens-v1.1-2026-07-18.md` §3.
 *
 * ARCHITETTURA (D3 + D4 ADR-0014):
 *   :root                             → Foundation + Semantic defaults
 *                                       (fallback safe: se nessun variant CSS
 *                                       carica, il tema resta funzionante)
 *   [data-sindesi-theme="light"]      → light variant, ridichiarazione
 *                                       simmetrica (themes/light.css)
 *   [data-sindesi-theme="dark"]       → override completo Foundation+Semantic
 *                                       (themes/dark.css) — PoC multi-theme
 *
 * REGOLA D'ORO (D3 ADR-0014):
 *   Ogni valore CSS nei componenti e nei template deve essere `var(--sd-...)`.
 *   Zero valori hard-coded. Se manca un token, si crea prima il token,
 *   poi si usa.
 *
 * INVARIANTE #4 (Multi-theme, ADR-0014):
 *   I componenti CSS (v0.3+) usano solo Semantic tokens (`--sd-color-bg-page`,
 *   `--sd-color-text-body`, ecc.) o Component tokens (`--sd-button-primary-bg`).
 *   MAI Foundation direttamente (`--sd-color-primary-500`).
 *   Il grafico cambia solo Foundation → Semantic propaga → Component propaga.
 *
 * VERSIONING (D9):
 *   Design Tokens: v1.1
 *   Theme:         v0.2.0
 *   Core compat:   >= v0.44.0
 *
 * FONT FAMILY:
 *   TBD dal grafico (§3.11.1 doc tokens v1.1).
 *   Fallback stack system-font attivo fino a decisione grafico.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * FOUNDATION TOKENS (livello 1) — valori primitivi
 * ═══════════════════════════════════════════════════════════════════════════
 * Defaults calibrati sulla variant `light` (identità Sindesi attuale).
 * themes/light.css li ridichiara esplicitamente per simmetria con dark.
 * themes/dark.css li override integralmente.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {

	/* ────────────────────────────────────────────────────────────────────
	 * §3.1 Colors — Primary (Blu Sindesi #0280DE)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-primary-50:  #EBF5FE;
	--sd-color-primary-100: #D1E7FC;
	--sd-color-primary-200: #A3CFF9;
	--sd-color-primary-300: #68AFF3;
	--sd-color-primary-400: #2E93EC;
	--sd-color-primary-500: #0280DE;  /* base Sindesi */
	--sd-color-primary-600: #0166B4;
	--sd-color-primary-700: #014D89;
	--sd-color-primary-800: #01345B;
	--sd-color-primary-900: #001B2E;
	--sd-color-primary-950: #000D17;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.2 Colors — Secondary (Teal Sindesi #08B4BB)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-secondary-50:  #E3FCFD;
	--sd-color-secondary-100: #B6F5F7;
	--sd-color-secondary-200: #71ECEF;
	--sd-color-secondary-300: #2CE0E5;
	--sd-color-secondary-400: #0FC6CD;
	--sd-color-secondary-500: #08B4BB;  /* base Sindesi */
	--sd-color-secondary-600: #079196;
	--sd-color-secondary-700: #066E72;
	--sd-color-secondary-800: #044A4D;
	--sd-color-secondary-900: #022729;
	--sd-color-secondary-950: #011315;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.3 Colors — Success (verde)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-success-50:  #EEFBEE;
	--sd-color-success-100: #D3F6D4;
	--sd-color-success-200: #A7EDA9;
	--sd-color-success-300: #6DDD74;
	--sd-color-success-400: #3EC748;
	--sd-color-success-500: #22AB2D;
	--sd-color-success-600: #1B8724;
	--sd-color-success-700: #166B1D;
	--sd-color-success-800: #0F4413;
	--sd-color-success-900: #08240B;
	--sd-color-success-950: #041205;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.4 Colors — Warning (giallo/arancio)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-warning-50:  #FEF9E7;
	--sd-color-warning-100: #FCEFC4;
	--sd-color-warning-200: #F9DE87;
	--sd-color-warning-300: #F5C947;
	--sd-color-warning-400: #EEB01D;
	--sd-color-warning-500: #D18F0E;
	--sd-color-warning-600: #A67108;
	--sd-color-warning-700: #7C5507;
	--sd-color-warning-800: #513706;
	--sd-color-warning-900: #291B03;
	--sd-color-warning-950: #150E01;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.5 Colors — Danger (rosso)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-danger-50:  #FDECEC;
	--sd-color-danger-100: #F9D2D2;
	--sd-color-danger-200: #F2A8A8;
	--sd-color-danger-300: #EA6E6E;
	--sd-color-danger-400: #DF3F3F;
	--sd-color-danger-500: #C71E1E;
	--sd-color-danger-600: #9F1717;
	--sd-color-danger-700: #771111;
	--sd-color-danger-800: #4F0B0B;
	--sd-color-danger-900: #280505;
	--sd-color-danger-950: #140303;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.6 Colors — Gray (text #000, bg #F5F5F5 identità Sindesi)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-gray-50:  #FAFAFA;
	--sd-color-gray-100: #F5F5F5;  /* bg page default Sindesi */
	--sd-color-gray-200: #E9E9E9;
	--sd-color-gray-300: #D4D4D4;
	--sd-color-gray-400: #A3A3A3;
	--sd-color-gray-500: #737373;
	--sd-color-gray-600: #525252;
	--sd-color-gray-700: #404040;
	--sd-color-gray-800: #262626;
	--sd-color-gray-900: #171717;
	--sd-color-gray-950: #000000;  /* text puro Sindesi */

	/* Neutri assoluti (non nella scala gray, utility) */
	--sd-color-white: #FFFFFF;
	--sd-color-black: #000000;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.8 Spacing scale (4px base)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-spacing-0:    0;
	--sd-spacing-px:   1px;
	--sd-spacing-0-5:  0.125rem;  /*  2px */
	--sd-spacing-1:    0.25rem;   /*  4px */
	--sd-spacing-2:    0.5rem;    /*  8px */
	--sd-spacing-3:    0.75rem;   /* 12px */
	--sd-spacing-4:    1rem;      /* 16px base sistema */
	--sd-spacing-5:    1.25rem;   /* 20px */
	--sd-spacing-6:    1.5rem;    /* 24px */
	--sd-spacing-8:    2rem;      /* 32px */
	--sd-spacing-10:   2.5rem;    /* 40px */
	--sd-spacing-12:   3rem;      /* 48px */
	--sd-spacing-16:   4rem;      /* 64px */
	--sd-spacing-20:   5rem;      /* 80px */
	--sd-spacing-24:   6rem;      /* 96px */
	--sd-spacing-32:   8rem;      /* 128px */

	/* ────────────────────────────────────────────────────────────────────
	 * §3.9 Border radius
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-radius-none: 0;
	--sd-radius-xs:   2px;
	--sd-radius-sm:   4px;
	--sd-radius-base: 6px;
	--sd-radius-md:   8px;   /* default button, card */
	--sd-radius-lg:   12px;
	--sd-radius-xl:   16px;
	--sd-radius-2xl:  24px;  /* pill navbar compat */
	--sd-radius-full: 9999px;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.10 Shadows
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-shadow-none:  none;
	--sd-shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.05);
	--sd-shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
	--sd-shadow-base:  0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--sd-shadow-md:    0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
	--sd-shadow-lg:    0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
	--sd-shadow-xl:    0 25px 50px -12px rgb(0 0 0 / 0.15);
	--sd-shadow-pill:  0 20px 50px rgb(0 0 0 / 0.08);
	--sd-shadow-focus: 0 0 0 3px rgb(2 128 222 / 0.4);

	/* ────────────────────────────────────────────────────────────────────
	 * §3.11.1 Typography — Font family (TBD dal grafico)
	 * ──────────────────────────────────────────────────────────────────── */
	/* Fallback stack system font attivo fino a scelta grafico.
	   Il grafico sostituisce il primo family con la sua scelta self-hosted
	   (WOFF2) e mantiene il fallback stack per FOUT-safety. */
	--sd-font-family-sans:    system-ui, -apple-system, "Segoe UI", Roboto,
	                          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--sd-font-family-serif:   Georgia, "Times New Roman", Times, serif;
	--sd-font-family-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
	                          Monaco, Consolas, "Liberation Mono", monospace;
	--sd-font-family-display: var(--sd-font-family-sans);  /* alias, il grafico può divergere */

	/* §3.11.2 Font size scale */
	--sd-font-size-2xs:  0.625rem;   /* 10px */
	--sd-font-size-xs:   0.75rem;    /* 12px */
	--sd-font-size-sm:   0.875rem;   /* 14px */
	--sd-font-size-base: 1rem;       /* 16px body default */
	--sd-font-size-lg:   1.125rem;   /* 18px */
	--sd-font-size-xl:   1.25rem;    /* 20px */
	--sd-font-size-2xl:  1.5rem;     /* 24px */
	--sd-font-size-3xl:  1.875rem;   /* 30px */
	--sd-font-size-4xl:  2.25rem;    /* 36px */
	--sd-font-size-5xl:  3rem;       /* 48px */
	--sd-font-size-6xl:  3.75rem;    /* 60px */

	/* §3.11.3 Font weight */
	--sd-font-weight-regular:    400;
	--sd-font-weight-medium:     500;
	--sd-font-weight-semibold:   600;
	--sd-font-weight-bold:       700;
	--sd-font-weight-extrabold:  800;

	/* §3.11.4 Line height */
	--sd-line-height-none:    1;
	--sd-line-height-tight:   1.2;
	--sd-line-height-snug:    1.375;
	--sd-line-height-normal:  1.5;
	--sd-line-height-relaxed: 1.65;
	--sd-line-height-loose:   2;

	/* §3.11.5 Letter spacing */
	--sd-letter-spacing-tighter: -0.05em;
	--sd-letter-spacing-tight:   -0.025em;
	--sd-letter-spacing-normal:  0;
	--sd-letter-spacing-wide:    0.025em;
	--sd-letter-spacing-wider:   0.05em;
	--sd-letter-spacing-widest:  0.1em;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.12 Motion
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-duration-fast:   150ms;
	--sd-duration-base:   200ms;
	--sd-duration-medium: 300ms;
	--sd-duration-slow:   500ms;

	--sd-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--sd-ease-in:     cubic-bezier(0.4, 0, 1, 1);
	--sd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--sd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ────────────────────────────────────────────────────────────────────
	 * §3.13 Z-index scale
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-z-hide:     -1;
	--sd-z-base:     0;
	--sd-z-docked:   10;
	--sd-z-dropdown: 1000;
	--sd-z-sticky:   1100;
	--sd-z-banner:   1200;
	--sd-z-overlay:  1300;
	--sd-z-modal:    1400;
	--sd-z-popover:  1500;
	--sd-z-toast:    1700;
	--sd-z-tooltip:  1800;

	/* ────────────────────────────────────────────────────────────────────
	 * §3.14 Breakpoints (referenziati in media queries — CSS non li usa
	 *       come var() ma sono documentati come riferimento per il grafico
	 *       e per JS futuro)
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-breakpoint-sm:  640px;   /* mobile large */
	--sd-breakpoint-md:  768px;   /* tablet */
	--sd-breakpoint-lg:  1024px;  /* desktop */
	--sd-breakpoint-xl:  1280px;  /* desktop large */
	--sd-breakpoint-2xl: 1536px;  /* wide */

	/* ────────────────────────────────────────────────────────────────────
	 * §3.15 Icons sizing
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-icon-size-xs:   12px;
	--sd-icon-size-sm:   16px;
	--sd-icon-size-base: 20px;
	--sd-icon-size-md:   24px;
	--sd-icon-size-lg:   32px;
	--sd-icon-size-xl:   48px;
	--sd-icon-size-2xl:  64px;


	/* ═══════════════════════════════════════════════════════════════════
	 * SEMANTIC TOKENS (livello 2) — alias contestuali
	 * ═══════════════════════════════════════════════════════════════════
	 * Questi sono i token che i componenti CSS (v0.3+) devono referenziare.
	 * Invariante #4 (multi-theme): componenti NON usano Foundation direct.
	 * ═══════════════════════════════════════════════════════════════════ */

	/* ────────────────────────────────────────────────────────────────────
	 * §3.7 Semantic — Background
	 * ──────────────────────────────────────────────────────────────────── */
	--sd-color-bg-page:        var(--sd-color-gray-100);   /* #F5F5F5 in light */
	--sd-color-bg-surface:     var(--sd-color-white);      /* card, modal */
	--sd-color-bg-surface-alt: var(--sd-color-gray-50);
	--sd-color-bg-hover:       var(--sd-color-gray-100);
	--sd-color-bg-active:      var(--sd-color-gray-200);
	--sd-color-bg-inverse:     var(--sd-color-gray-950);   /* dark accent su light */

	/* Text */
	--sd-color-text-body:       var(--sd-color-gray-950);
	--sd-color-text-heading:    var(--sd-color-gray-950);
	--sd-color-text-secondary:  var(--sd-color-gray-600);
	--sd-color-text-muted:      var(--sd-color-gray-500);
	--sd-color-text-inverse:    var(--sd-color-white);     /* su bg scuri */
	--sd-color-text-link:       var(--sd-color-primary-500);
	--sd-color-text-link-hover: var(--sd-color-primary-600);

	/* Border */
	--sd-color-border-default: var(--sd-color-gray-300);
	--sd-color-border-strong:  var(--sd-color-gray-400);
	--sd-color-border-muted:   var(--sd-color-gray-200);
	--sd-color-border-focus:   var(--sd-color-primary-500);

	/* Action (button primary/secondary) */
	--sd-color-action-primary:        var(--sd-color-primary-500);
	--sd-color-action-primary-hover:  var(--sd-color-primary-600);
	--sd-color-action-primary-active: var(--sd-color-primary-700);
	--sd-color-action-secondary:        var(--sd-color-secondary-500);
	--sd-color-action-secondary-hover:  var(--sd-color-secondary-600);
	--sd-color-action-secondary-active: var(--sd-color-secondary-700);

	/* Feedback (alert, toast, badge) */
	--sd-color-feedback-success: var(--sd-color-success-500);
	--sd-color-feedback-warning: var(--sd-color-warning-500);
	--sd-color-feedback-danger:  var(--sd-color-danger-500);

	/* Focus ring (accessibility WCAG AA) */
	--sd-color-focus-ring: var(--sd-color-primary-500);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * BACKWARD-COMPAT ALIASES per palette Sindesi legacy
 * ═══════════════════════════════════════════════════════════════════════════
 * Il tema attuale `sindesi/` (post-F5) e Sindesi Core espongono la palette
 * come `--sindesi-brand-*` (memory 25, palette registrata in sindesi-base.css).
 *
 * Manteniamo alias qui in modo che eventuali componenti Core-emessi che
 * ancora referenziano `--sindesi-brand-primary` continuino a funzionare
 * quando il nuovo tema è attivo. Gli alias sono in `:root` fuori dai
 * blocchi variant → propagano automaticamente via multi-theme.
 *
 * Rimozione prevista: quando Sindesi Core (Fase 3b) migra a `--sd-*`.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
	--sindesi-brand-primary:    var(--sd-color-primary-500);
	--sindesi-brand-secondary:  var(--sd-color-secondary-500);
	--sindesi-brand-text:       var(--sd-color-text-body);
	--sindesi-brand-background: var(--sd-color-bg-page);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * BASE STYLES minimali (pre-v0.3 UI components)
 * ═══════════════════════════════════════════════════════════════════════════
 * v0.2 fornisce base body + skip-link WCAG. I componenti (button, form,
 * card, ecc.) arrivano in v0.3.
 * ═══════════════════════════════════════════════════════════════════════════ */

body {
	background-color: var(--sd-color-bg-page);
	color: var(--sd-color-text-body);
	font-family: var(--sd-font-family-sans);
	font-size: var(--sd-font-size-base);
	font-weight: var(--sd-font-weight-regular);
	line-height: var(--sd-line-height-normal);
	margin: 0;
	padding: 0;
}

a {
	color: var(--sd-color-text-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--sd-duration-fast) var(--sd-ease-out);
}
a:hover {
	color: var(--sd-color-text-link-hover);
}
a:focus-visible {
	outline: 2px solid var(--sd-color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--sd-radius-xs);
}

/* Skip-link WCAG a11y — D10 No JS First
   Componente coordinato con template-parts/header/skip-link.php */
.sd-skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.sd-skip-link:focus {
	position: fixed;
	left: var(--sd-spacing-4);
	top: var(--sd-spacing-4);
	width: auto;
	height: auto;
	background-color: var(--sd-color-action-primary);
	color: var(--sd-color-text-inverse);
	padding: var(--sd-spacing-3) var(--sd-spacing-5);
	border-radius: var(--sd-radius-md);
	font-weight: var(--sd-font-weight-semibold);
	text-decoration: none;
	z-index: var(--sd-z-toast);
	box-shadow: var(--sd-shadow-lg);
}