/* =========================================
   CONVERTY CRM — Design Tokens
   Identidade visual oficial: Converty Media Kit
   Paleta: Evo Cream, Concept Black, Converty Green, Deep Indigo, Heat Crimson
   ========================================= */

:root {
  /* ── Marca (constante em qualquer tema) ───────────────────────── */
  --brand-cream:        #F1F2E7;   /* Evo Cream */
  --brand-black:        #262626;   /* Concept Black */
  --brand-green:        #EDFF00;   /* Converty Green */
  --brand-indigo:       #7C00FF;   /* Deep Indigo */
  --brand-crimson:      #FF005C;   /* Heat Crimson */

  /* ── Accent (igual em ambos os temas) ─────────────────────────── */
  --accent:             var(--brand-green);
  --accent-hover:       #D4E600;
  --accent-muted:       rgba(237, 255, 0, 0.12);
  --accent-text:        var(--brand-black);   /* texto sobre o accent */

  /* ── Status colors (semantica) ────────────────────────────────── */
  --success:            #22C55E;
  --success-bg:         rgba(34, 197, 94, 0.12);
  --warning:            #EAB308;
  --warning-bg:         rgba(234, 179, 8, 0.12);
  --error:              var(--brand-crimson);
  --error-bg:           rgba(255, 0, 92, 0.12);
  --info:               var(--brand-indigo);
  --info-bg:            rgba(124, 0, 255, 0.12);

  /* ── Lead status colors ───────────────────────────────────────── */
  --hot:                var(--brand-crimson);
  --hot-bg:             rgba(255, 0, 92, 0.15);
  --warm:               #F97316;
  --warm-bg:            rgba(249, 115, 22, 0.15);
  --cold:               #6B7280;
  --cold-bg:            rgba(107, 114, 128, 0.15);
  --new:                var(--brand-indigo);
  --new-bg:             rgba(124, 0, 255, 0.15);
  --converted:          var(--success);
  --converted-bg:       var(--success-bg);

  /* ── Tipografia ───────────────────────────────────────────────── */
  --font-sans:          'Manrope', system-ui, -apple-system, 'Inter', sans-serif;
  --font-display:       'Manrope', system-ui, sans-serif;   /* substitui Neue Haas */
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */

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

  /* ── Spacing ──────────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;

  /* ── Border radius ────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ── Transitions ──────────────────────────────────────────────── */
  --transition:        150ms ease;
  --transition-slow:   300ms ease;

  /* ── Layout ───────────────────────────────────────────────────── */
  --sidebar-width:        220px;       /* expandida com label visivel */
  --sidebar-slim:         64px;        /* fallback caso usuario colapse */
  --topbar-height:        56px;

  /* Modal widths — use sm pra confirmacao curta, md p/ form comum, lg p/
     form com multiplos blocos, xl p/ histórico/tabela em modal. */
  --modal-width-sm:       420px;
  --modal-width-md:       520px;
  --modal-width-lg:       640px;
  --modal-width-xl:       820px;

  /* ── Z-index layers ───────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-modal:     200;
  --z-toast:     300;
  --z-tooltip:   400;
}

/* ── DARK (default) ─────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary:   var(--brand-black);   /* #262626 — bg principal */
  --bg-surface:   #2E2E2E;              /* cards, modal */
  --bg-elevated:  #383838;              /* hover, badges, chips */
  --bg-hover:     #404040;
  --bg-input:     #1F1F1F;              /* inputs mais escuros */
  --bg-sidebar:   #1F1F1F;              /* sidebar mais escuro que o body */

  --text-primary:    var(--brand-cream);
  --text-secondary:  #B8B8B0;
  --text-tertiary:   #7A7A75;
  --text-disabled:   #4D4D4A;

  --border:         #3D3D3D;
  --border-focus:   var(--accent);
  --border-subtle:  #2F2F2F;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 20px rgba(237,255,0,0.15);

  --logo-color:    var(--brand-green);   /* isotipo + "CRM" sub no dark = verde neon */
}

/* ── LIGHT ──────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-primary:   var(--brand-cream);   /* #F1F2E7 — bg principal */
  --bg-surface:   #FFFFFF;              /* cards branco puro */
  --bg-elevated:  #FAFBF4;              /* hover sutil */
  --bg-hover:     #ECEDE0;
  --bg-input:     #FFFFFF;
  --bg-sidebar:   #FFFFFF;              /* sidebar acompanha o tema light */

  --text-primary:    var(--brand-black);
  --text-secondary:  #5A5A5A;
  --text-tertiary:   #8A8A85;
  --text-disabled:   #BBBBB8;

  --border:         #D8D9D0;
  --border-focus:   var(--brand-indigo);
  --border-subtle:  #E8E9E0;

  --shadow-sm:     0 1px 3px rgba(38, 38, 38, 0.08);
  --shadow-md:     0 4px 12px rgba(38, 38, 38, 0.10);
  --shadow-lg:     0 8px 24px rgba(38, 38, 38, 0.12);
  --shadow-accent: 0 0 20px rgba(124, 0, 255, 0.25);

  --logo-color:    var(--brand-indigo);  /* isotipo + "CRM" sub usam Deep Indigo no light */

  /* Neon verde nao tem contraste sobre creme — no light o accent primario
     vira Deep Indigo (#7C00FF), outra cor oficial da marca, com texto
     branco. Mantem a personalidade brand-rich sem perder legibilidade. */
  --accent:        var(--brand-indigo);
  --accent-hover:  #6700D9;
  --accent-muted:  rgba(124, 0, 255, 0.10);
  --accent-text:   #FFFFFF;
}