/* ===== LMADVISORY — DESIGN TOKENS (dark-first) ===== */
/* Caricato PRIMA di main.css — nessun componente qui, solo token */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════
   DARK MODE — DEFAULT (invariato)
═══════════════════════════════════════════════════ */
:root {
  /* Superfici */
  --bg:    #0d0d0f;
  --surf:  #141416;
  --surf2: #1a1a1e;
  --surf3: #222228;

  --bg2: var(--surf2);
  --bg3: var(--surf3);

  /* Brand verde */
  --green:       #00C896;
  --green-dark:  #00A07A;
  --green-light: rgba(0,200,150,0.12);
  --green-text:  #00C896;
  --gdim:        rgba(0,200,150,0.10);

  /* Colori semantici */
  --color-danger:     #FF5C5C;
  --color-danger-bg:  rgba(255,92,92,0.12);
  --color-warning:    #F0A035;
  --color-warning-bg: rgba(240,160,53,0.12);
  --color-info:       #4D9CFF;
  --color-info-bg:    rgba(77,156,255,0.12);
  --color-purple:     #A78BFA;
  --color-purple-bg:  rgba(167,139,250,0.12);
  --color-pink:       #EC4899;
  --color-pink-bg:    rgba(236,72,153,0.12);

  --banner-demo-bg:      rgba(240,160,53,0.10);
  --banner-demo-border:  rgba(240,160,53,0.30);
  --banner-demo-text:    #F0A035;
  --banner-demo-btn-bg:  #F0A035;
  --banner-demo-btn-fg:  #0d0d0f;

  --avatar-icon-info-bg:   rgba(77,156,255,0.12);
  --avatar-icon-green-bg:  rgba(0,200,150,0.12);

  --disclaimer-bg:     var(--surf2);
  --disclaimer-border: var(--border-strong);
  --disclaimer-text:   var(--text3);

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

  --text:  #f0f0f2;
  --text2: #9a9aa8;
  --text3: #5a5a68;

  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', 'Courier New', monospace;

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;

  --text-xs:   11px; --text-sm:   12px; --text-base: 13px;
  --text-md:   15px; --text-lg:   16px; --text-xl:   18px;
  --text-2xl:  20px; --text-3xl:  28px;
  --font-normal: 400; --font-medium: 500; --font-semibold: 600;
  --line-tight: 1.2; --line-normal: 1.5; --line-relaxed: 1.65;

  --radius-sm:  4px;  --radius:    8px; --radius-lg:  10px;
  --radius-xl: 14px; --radius-full: 9999px;

  --t-fast:   0.12s ease;
  --t-normal: 0.20s ease;
  --t-slow:   0.35s ease;

  --z-sticky: 10; --z-sidebar-mobile: 8; --z-overlay: 100; --z-toast: 200;

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-focus: 0 0 0 3px rgba(0,200,150,0.25);
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — ispirazione Mercury + riferimenti Dribbble
═══════════════════════════════════════════════════ */
:root.light {
  --bg:    #F5F4F0;
  --surf:  #FFFFFF;
  --surf2: #F0EFE9;
  --surf3: #E8E6DF;
  --bg2: var(--surf2);
  --bg3: var(--surf3);

  --green:       #0D9E6E;
  --green-dark:  #0A7A55;
  --green-light: #E6F7F1;
  --green-text:  #0A7A55;
  --gdim:        rgba(13,158,110,0.08);

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

  --text:  #111210;
  --text2: #6B6B63;
  --text3: #9E9E94;

  --color-danger:     #C0392B;
  --color-danger-bg:  #FDF0EE;
  --color-warning:    #D4830A;
  --color-warning-bg: #FEF6E7;
  --color-info:       #1A6FAD;
  --color-info-bg:    #EBF4FB;
  --color-purple:     #5E3FBE;
  --color-purple-bg:  #EEEBFB;
  --color-pink:       #BE185D;
  --color-pink-bg:    #FCE7F1;

  --banner-demo-bg:      #FEF6E7;
  --banner-demo-border:  #D4830A;
  --banner-demo-text:    #92400E;
  --banner-demo-btn-bg:  #D4830A;
  --banner-demo-btn-fg:  #ffffff;

  --avatar-icon-info-bg:   #EBF4FB;
  --avatar-icon-green-bg:  #E6F7F1;

  --disclaimer-bg:     var(--surf2);
  --disclaimer-border: var(--border-strong);
  --disclaimer-text:   var(--text3);

  --radius-sm:   4px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-focus: 0 0 0 3px rgba(13,158,110,0.20);
}

/* ===== CONTENT WRAP — layout full-width con padding ===== */
/* Qui perché main.css è troppo grande per essere aggiornato via API */
.content-wrap {
  padding: var(--sp-5) var(--sp-6);
  width: 100%;
}
.content-wrap--narrow {
  max-width: 680px;
}
@media (max-width: 640px) {
  .content-wrap { padding: var(--sp-4); }
}