/* ============================================================
   tokens.css — Variáveis de cor e design da Contém CRM
   Edite aqui para ajustar toda a paleta do sistema
   ============================================================ */

:root {
  /* ── MARCA CONTÉM ─────────────────────────────────────── */
  --brand-primary:   #ff0080;   /* Rosa principal */
  --brand-secondary: #c8f000;   /* Lima / acento */
  --brand-dark:      #cc0066;   /* Rosa escuro (hover) */

  /* ── SUPERFÍCIES — MODO ESCURO (padrão) ──────────────── */
  --bg-app:      #080808;   /* Fundo global */
  --bg-surface:  #0f0f0f;   /* Cards, header, sidebar */
  --bg-surface2: #141414;   /* Cards secundários */
  --bg-surface3: #1a1a1a;   /* Inputs, hover leve */
  --bg-overlay:  rgba(0,0,0,0.75); /* Overlay de modais */

  /* ── BORDAS ───────────────────────────────────────────── */
  --border:      #1e1e1e;
  --border-md:   #282828;
  --border-lg:   #333333;

  /* ── TEXTO ────────────────────────────────────────────── */
  --text-primary:   #f0ece6;
  --text-secondary: #9a9690;
  --text-muted:     #484440;
  --text-inverse:   #111111;

  /* ── SEMÂNTICAS ───────────────────────────────────────── */
  --color-success:  #22c55e;
  --color-warning:  #f59e0b;
  --color-danger:   #ef4444;
  --color-info:     #3b82f6;
  --color-purple:   #a855f7;
  --color-cyan:     #06b6d4;
  --color-orange:   #f97316;

  /* ── DERIVADAS DA MARCA ───────────────────────────────── */
  --brand-dim:   rgba(255,0,128,0.15);
  --brand-glow:  rgba(255,0,128,0.06);
  --brand-faint: rgba(255,0,128,0.08);

  /* ── LAYOUT ───────────────────────────────────────────── */
  --sidebar-w:       220px;
  --sidebar-w-mini:   56px;
  --header-h:         58px;
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-full:    9999px;

  /* ── TIPOGRAFIA ───────────────────────────────────────── */
  --font-sans: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* ── SOMBRAS ──────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);

  /* ── TRANSIÇÕES ───────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.2s;

  /* ── ETAPAS CRM (personalizável por funil) ────────────── */
  --stage-1: #3b82f6;
  --stage-2: #a855f7;
  --stage-3: #06b6d4;
  --stage-4: #f59e0b;
  --stage-5: #f97316;
  --stage-6: #8b5cf6;
  --stage-7: #22c55e;
  --stage-won:  #16a34a;
  --stage-lost: #ef4444;
}

/* ── MODO CLARO ───────────────────────────────────────── */
[data-theme="light"] {
  --bg-app:      #f3f3ee;
  --bg-surface:  #ffffff;
  --bg-surface2: #f8f8f4;
  --bg-surface3: #eeeeea;
  --bg-overlay:  rgba(0,0,0,0.5);
  --border:      #e0e0d8;
  --border-md:   #d0d0c8;
  --border-lg:   #c0c0b8;
  --text-primary:   #111111;
  --text-secondary: #555550;
  --text-muted:     #999990;
  --brand-glow:  rgba(255,0,128,0.04);
  --brand-faint: rgba(255,0,128,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.16);
}