/* ================================================================
   DESIGN TOKENS — EMB Brand
   Step 1.1 — palette, spacing, radius, shadow, dark mode vars
   Default: light mode — data-theme="dark" solo al click del toggle
   ================================================================ */

:root {

  /* ── Brand identity ────────────────────────────────────────── */
  --main-color:     #00b4c1;
  --main-color-rgb: 0, 180, 193;
  --primary-rgb:    0, 180, 193;

  /* ── Primary palette (cyan, 50–900) ─────────────────────────── */
  --primary-50:  #e0f8f9;
  --primary-100: #b3eeef;
  --primary-200: #80e3e6;
  --primary-300: #4dd8dc;
  --primary-400: #26cfd6;
  --primary-500: #00b4c1;
  --primary-600: #009daa;
  --primary-700: #007d88;
  --primary-800: #005f67;
  --primary-900: #003f45;

  /* ── Sidebar (dark cyan) ────────────────────────────────────── */
  --sidebar-bg:               #082a2e;
  --sidebar-bg-2:             #0d4a52;
  --sidebar-border:           rgba(255,255,255,.09);
  --sidebar-text:             rgba(255,255,255,.85);
  --sidebar-text-muted:       rgba(255,255,255,.44);
  --sidebar-hover-bg:         rgba(255,255,255,.08);
  --sidebar-active-bg:        rgba(255,255,255,.15);
  --sidebar-active-indicator: var(--main-color);

  /* ── Neutral palette (warm greys, 50–900) ─────────────────── */
  --neutral-50:  #f8f7f6;
  --neutral-100: #f0eee9;
  --neutral-200: #e5e2dc;
  --neutral-300: #d0cdc6;
  --neutral-400: #b5b0a7;
  --neutral-500: #8c8880;
  --neutral-600: #6b6762;
  --neutral-700: #504d48;
  --neutral-800: #36342f;
  --neutral-900: #1e1c19;

  /* ── Semantic — Success ─────────────────────────────────────── */
  --success-50:     #f0fdf0;
  --success-500:    #22c55e;
  --success-600:    #16a34a;
  --success-text:   #166534;
  --success-bg:     #dcfce7;
  --success-border: #86efac;

  /* ── Semantic — Warning ─────────────────────────────────────── */
  --warning-50:     #fffbeb;
  --warning-500:    #f59e0b;
  --warning-600:    #d97706;
  --warning-text:   #92400e;
  --warning-bg:     #fef3c7;
  --warning-border: #fde68a;

  /* ── Semantic — Danger ──────────────────────────────────────── */
  --danger-50:     #fff1f1;
  --danger-500:    #ef4444;
  --danger-600:    #dc2626;
  --danger-text:   #991b1b;
  --danger-bg:     #fee2e2;
  --danger-border: #fca5a5;

  /* ── Semantic — Info ────────────────────────────────────────── */
  --info-50:     #eff6ff;
  --info-500:    #3b82f6;
  --info-600:    #2563eb;
  --info-text:   #1e40af;
  --info-bg:     #dbeafe;
  --info-border: #93c5fd;

  /* ── Surface & text (light mode default) ────────────────────── */
  --surface-bg:     #f8f7f6;
  --surface-card:   #ffffff;
  --surface-border: #e5e2dc;
  --surface-input:  #ffffff;
  --text-primary:   #1e1c19;
  --text-secondary: #6b6762;
  --text-muted:     #b5b0a7;
  --text-inverse:   #ffffff;

  /* ── Spacing ────────────────────────────────────────────────── */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ── Border radius ──────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows (multi-layer) ──────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);

  /* ── Focus ring ─────────────────────────────────────────────── */
  --ring-primary: 0 0 0 3px rgba(var(--primary-rgb), .25);
  --ring-danger:  0 0 0 3px rgba(239, 68, 68, .25);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-display: 2.25rem;   /* 36px — hero/display */
  --text-h1:      1.75rem;   /* 28px */
  --text-h2:      1.5rem;    /* 24px */
  --text-h3:      1.25rem;   /* 20px */
  --text-h4:      1.125rem;  /* 18px */
  --text-base:    0.9375rem; /* 15px — body */
  --text-sm:      0.8125rem; /* 13px — small */
  --text-xs:      0.6875rem; /* 11px — micro */

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.55;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
}

/* ── Dark mode overrides ────────────────────────────────────────
   Attivato da JS via <html data-theme="dark">
   Default è SEMPRE light — questo blocco non ha effetto senza
   il toggle esplicito da parte dell'utente.
   ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {

  /* Surface & text */
  --surface-bg:     #1e1c19;
  --surface-card:   #2a2825;
  --surface-border: #3d3a35;
  --surface-input:  #2a2825;
  --text-primary:   #f0eee9;
  --text-secondary: #b5b0a7;
  --text-muted:     #6b6762;

  /* Neutral — stessa scala, direzione invertita */
  --neutral-50:  #1e1c19;
  --neutral-100: #2a2825;
  --neutral-200: #36342f;
  --neutral-300: #504d48;
  --neutral-400: #6b6762;
  --neutral-500: #8c8880;
  --neutral-600: #b5b0a7;
  --neutral-700: #d0cdc6;
  --neutral-800: #e5e2dc;
  --neutral-900: #f8f7f6;

  /* Semantic — adattate per dark (bg scuri, testi chiari) */
  --success-bg:     #052e16;
  --success-border: #166534;
  --success-text:   #86efac;
  --warning-bg:     #1c1204;
  --warning-border: #92400e;
  --warning-text:   #fde68a;
  --danger-bg:      #1c0606;
  --danger-border:  #991b1b;
  --danger-text:    #fca5a5;
  --info-bg:        #030e25;
  --info-border:    #1e40af;
  --info-text:      #93c5fd;
}