:root {
  /* ============================================================
   * AEQUOR DESIGN SYSTEM — TOKENS (PUBLIC + ADMIN)
   * Regole:
   * - Usare SOLO queste variabili nei componenti (no HEX diretti).
   * - Arancia = unica primary CTA.
   * - Blu = solo link / focus / interazioni informative.
   * - Rossi = solo stati critici / destructive.
   * ============================================================
   */

  /* ===== COLORI — SUPERFICI ===== */

  /* --color-surface-base
     Contesto: Background base pagina.
     Ruolo nel sistema: Base neutra per il respiro visivo.
     Primary use: Background pagina e sezioni ampie.
     Avoid: Testo e separatori (contrasto insufficiente).
     AI Hint: Base page background surface. */
  --color-surface-base: #F5F5F5;            /* Grigio 2 Light */

  /* --color-surface-primary
     Contesto: Superficie primaria.
     Ruolo nel sistema: Base per card e contenuti.
     Primary use: Card, modali, box contenuto, testo su fondi scuri/arancio.
     Avoid: Testo su superfici chiare senza contrast check.
     AI Hint: Default content surface and inverse text on dark surfaces. */
  --color-surface-primary: #FFFFFF;         /* Bianco */

  /* --color-surface-secondary
     Contesto: Superficie secondaria.
     Ruolo nel sistema: Layer intermedio/soft container.
     Primary use: Input background, card soft, componenti “inactive”.
     Avoid: Testo primario.
     AI Hint: Secondary container surface, low emphasis. */
  --color-surface-secondary: #D9D9D9;       /* Grigio 2 */

  /* --color-surface-subtle
     Contesto: Tint neutro (soft highlight).
     Ruolo nel sistema: Differenziazione non interattiva.
     Primary use: Box informativi soft, background sezione alternativa.
     Avoid: Elementi interattivi/CTA.
     AI Hint: Subtle highlighted surface (non-action). */
  --color-surface-subtle: #D8E4D6;          /* Grigio 3 */

  /* --color-surface-focus-dark
     Contesto: Scuro caldo profondo.
     Ruolo nel sistema: Focus panel / contrast module.
     Primary use: Box focus, overlay, pannelli concentrazione.
     Avoid: CTA primarie e testo lungo.
     AI Hint: High-contrast warm surface for focus modules. */
  --color-surface-focus-dark: #2B1711;      /* Sc-Arancia */

  /* ===== COLORI — TESTO ===== */

  /* --color-text-primary
     Contesto: Colore tipografico ad altissima gerarchia.
     Ruolo nel sistema: Informazione primaria e contenuti ad alta rilevanza.
     Primary use: Titoli, numeri KPI, label forti, icone principali.
     Avoid: Superfici estese decorative.
     AI Hint: Highest hierarchy text and key numeric values. */
  --color-text-primary: #000000;            /* Black */

  /* --color-text-inverse
     Contesto: Testo su superfici scure o arancioni.
     Ruolo nel sistema: Leggibilità massima su CTA e pannelli scuri.
     Primary use: Testo su Arancia, Sc-Arancia, header/footer scuri.
     Avoid: Body text lungo su superfici molto chiare.
     AI Hint: Inverse text on dark/brand surfaces. */
  --color-text-inverse: #FFFFFF;            /* Bianco (inverse) */

  /* --color-text-structural
     Contesto: Neutro scuro strutturale.
     Ruolo nel sistema: Struttura e contesto, UI chrome.
     Primary use: Sezioni strutturali, header secondari, label strong neutre.
     Avoid: CTA o messaggi di conversione.
     AI Hint: Structural dark neutral elements. */
  --color-text-structural: #3B494C;         /* Sc-Blu */

  /* ===== COLORI — BORDI ===== */

  /* --color-border-soft
     Contesto: Separatore leggero.
     Ruolo nel sistema: Border soft e divisioni delicate.
     Primary use: Bordi sottili, separazioni leggere, hairline dividers.
     Avoid: Elementi ad alta enfasi.
     AI Hint: Soft borders and subtle separators. */
  --color-border-soft: #CDDDDD;             /* Grigio 1 Light */

  /* --color-border-medium
     Contesto: Separatore strutturale medio.
     Ruolo nel sistema: Outlines visibili e griglie UI.
     Primary use: Divider medi, outline tabelle/liste, confini card.
     Avoid: Testo e CTA.
     AI Hint: Medium structural borders and dividers. */
  --color-border-medium: #BBC7C7;           /* Grigio 1 */

  /* ===== COLORI — AZIONE ===== */

  /* --color-action-primary
     Contesto: Primary brand + primary action.
     Ruolo nel sistema: Direzione, conversione, priorità.
     Primary use: CTA primarie, hero highlight, indicatori importanti.
     Avoid: Body text lungo, background full-page continuo.
     AI Hint: Primary action color; highest priority CTA and key highlights. */
  --color-action-primary: #F95100;          /* Arancia */

  /* --color-action-informational
     Contesto: Accento informativo e interazione secondaria.
     Ruolo nel sistema: Link, focus, active state, UI help.
     Primary use: Link, focus ring, stati attivi, elementi informativi.
     Avoid: CTA primarie e hero highlights.
     AI Hint: Links/focus/active states, not primary CTAs. */
  --color-action-informational: #2A9BFE;    /* Blu */

  /* ===== COLORI — STATO ===== */

  /* --color-state-urgent
     Contesto: Accento ad alta intensità.
     Ruolo nel sistema: Attenzione/urgenza controllata.
     Primary use: Badge urgenti, micro-azioni ad alta visibilità.
     Avoid: Uso diffuso su molti elementi contemporanei.
     AI Hint: High-attention accent; use sparingly. */
  --color-state-urgent: #FF3600;            /* Up-Arancia */

  /* --color-state-danger
     Contesto: Stato critico / destructive.
     Ruolo nel sistema: Error, rischio, irreversibile.
     Primary use: Error state, delete action, alert severi.
     Avoid: Decorazione o marketing.
     AI Hint: Critical/destructive only. */
  --color-state-danger: #F00005;            /* Up-Up-Arancia */

  /* ===== TIPOGRAFIA — FONT FAMILY ===== */
 
  /* Font primari Aequor (Inter) */
  --font-family-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-primary: 600;

  /* ===== TIPOGRAFIA — SCALE (AG STYLES) ===== */

  /* Ag Large Title 1 — 80/80 */
  --font-size-lg-title-1: 80px;
  --line-height-lg-title-1: 80px;

  /* Ag Title 1 — 60/62 */
  --font-size-title-1: 60px;
  --line-height-title-1: 62px;

  /* Ag Title 2 — 30/32 */
  --font-size-title-2: 30px;
  --line-height-title-2: 32px;

  /* Ag Title 3 — 20/23 */
  --font-size-title-3: 20px;
  --line-height-title-3: 23px;

  /* Ag Caption 1 — 15/23 */
  --font-size-caption-1: 15px;
  --line-height-caption-1: 23px;

  /* Ag Caption 2 — 12/16 */
  --font-size-caption-2: 12px;
  --line-height-caption-2: 16px;

  /* Ag FootNote — 9/15 */
  --font-size-footnote: 9px;
  --line-height-footnote: 15px;

  /* ===== LAYOUT & SPACING (BASE GRID) ===== */

  /* Spacing scale derivata dai pattern esistenti (pt/pb 20,40,60,80,120,180) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 80px;
  --space-4xl: 120px;
  --space-5xl: 180px;

  /* Grid hints (commentate, usate come riferimento per layout marketing/dashboard) */
  /* Grid 1 Desktop (marketing): usare colonne ampie, gap >= var(--space-xl). */
  /* Grid 2 Desktop (dashboard): usare densità maggiore, gap ~ var(--space-lg). */
  /* Grid Phone 1: contenuti full-width, CTA full-width, stack verticale. */
}