/* =============================================================
   paolovigano.it — Design Tokens
   Fonte unica di verità per colori, tipografia, spacing.
   Importato da tutti i CSS del sito.
   ============================================================= */

/* ── FONT ──────────────────────────────────────────────────── */
/* Cabinet Grotesk (titoli) + DM Sans (corpo)
   Import via <link> Google Fonts nei layout PHP */

:root {
  --font-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Scala tipografica */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;

  /* Pesi */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line height */
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.035em;
  --tracking-base:   -0.01em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;
}

/* ── COLORI INVARIANTI ──────────────────────────────────────── */

:root {
  --accent:        #1B3A7A;
  --accent-hover:  #162F63;
  --accent-muted:  rgba(27, 58, 122, 0.07);
  --accent-border: rgba(27, 58, 122, 0.15);

  --success:       #16A34A;
  --success-muted: rgba(22, 163, 74, 0.10);

  --danger:        #DC2626;
  --danger-muted:  rgba(220, 38, 38, 0.10);
  --danger-border: rgba(220, 38, 38, 0.20);

  --warning:       #D97706;
  --warning-muted: rgba(217, 119, 6, 0.10);
}

/* ── TEMA CHIARO (default) ──────────────────────────────────── */

:root,
[data-theme="light"] {
  --bg:          #F8F6F1;
  --bg-elevated: #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F0EDE6;
  --surface-3:   #EDE8DE;

  --border:        rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.14);

  --text-1: #1A1A1A;
  --text-2: rgba(26, 26, 26, 0.55);
  --text-3: rgba(26, 26, 26, 0.35);

  --overlay: rgba(0, 0, 0, 0.45);

  --focus-ring: 0 0 0 3px rgba(27, 58, 122, 0.25);

  --scrollbar-thumb: #C8C4BC;
  --scrollbar-track: #F0EDE6;
}

/* ── TEMA SCURO ─────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg:          #111318;
  --bg-elevated: #161A20;
  --surface:     #1C2028;
  --surface-2:   #232830;
  --surface-3:   #2A303A;

  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);

  --text-1: #F0EDE8;
  --text-2: rgba(240, 237, 232, 0.55);
  --text-3: rgba(240, 237, 232, 0.30);

  --overlay: rgba(0, 0, 0, 0.65);

  --focus-ring: 0 0 0 3px rgba(27, 58, 122, 0.45);

  --scrollbar-thumb: #333;
  --scrollbar-track: #1a1a1a;

  --accent:        #4A7FD4;
  --accent-hover:  #3A6FC4;
  --accent-muted:  rgba(74, 127, 212, 0.12);
  --accent-border: rgba(74, 127, 212, 0.25);
}

/* ── SPACING ────────────────────────────────────────────────── */

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ── BORDER RADIUS ──────────────────────────────────────────── */

:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}

/* ── SHADOWS ────────────────────────────────────────────────── */

:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── TRANSIZIONI ────────────────────────────────────────────── */

:root {
  --transition-fast: 0.12s ease;
  --transition-base: 0.20s ease;
  --transition-slow: 0.35s ease;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */

:root {
  --nav-height:    60px;
  --sidebar-width: 240px;
  --content-max:   1100px;
  --content-pad:   clamp(20px, 4vw, 40px);
}

/* ── Z-INDEX ────────────────────────────────────────────────── */

:root {
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}