/* ============================================================
   tokens.css — Variáveis de cor e design da Contém CRM
   Modo claro como padrão
   ============================================================ */

:root {
  /* ── MARCA CONTÉM ─────────────────────────────────────── */
  --brand-primary:   #ff0080;
  --brand-secondary: #c8f000;
  --brand-dark:      #cc0066;

  /* ── SUPERFÍCIES — MODO CLARO (padrão) ───────────────── */
  --bg-app:      #f5f5f0;
  --bg-surface:  #ffffff;
  --bg-surface2: #f8f8f4;
  --bg-surface3: #eeeee9;
  --bg-overlay:  rgba(0,0,0,0.45);

  /* ── BORDAS ───────────────────────────────────────────── */
  --border:      #e5e5de;
  --border-md:   #d5d5ce;
  --border-lg:   #c5c5be;

  /* ── TEXTO ────────────────────────────────────────────── */
  --text-primary:   #111111;
  --text-secondary: #555550;
  --text-muted:     #999990;
  --text-inverse:   #ffffff;

  /* ── SEMÂNTICAS ───────────────────────────────────────── */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-danger:   #dc2626;
  --color-info:     #2563eb;
  --color-purple:   #7c3aed;
  --color-cyan:     #0891b2;
  --color-orange:   #ea580c;

  /* ── DERIVADAS DA MARCA ───────────────────────────────── */
  --brand-dim:   rgba(255,0,128,0.18);
  --brand-glow:  rgba(255,0,128,0.04);
  --brand-faint: rgba(255,0,128,0.07);

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

  /* ── TIPOGRAFIA ───────────────────────────────────────── */
  --font-sans: 'Manrope', sans-serif;
  --font-mono: 'Manrope', sans-serif;

  /* ── SOMBRAS ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

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

  /* ── ETAPAS CRM ───────────────────────────────────────── */
  --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: #dc2626;
}

/* ── MODO ESCURO (legado, não usado por padrão) ───────────── */
[data-theme="dark"] {
  --bg-app:      #080808;
  --bg-surface:  #0f0f0f;
  --bg-surface2: #141414;
  --bg-surface3: #1a1a1a;
  --bg-overlay:  rgba(0,0,0,0.75);
  --border:      #1e1e1e;
  --border-md:   #282828;
  --border-lg:   #333333;
  --text-primary:   #f0ece6;
  --text-secondary: #9a9690;
  --text-muted:     #484440;
  --text-inverse:   #111111;
  --color-success:  #22c55e;
  --color-warning:  #f59e0b;
  --color-danger:   #ef4444;
  --brand-glow:  rgba(255,0,128,0.06);
  --brand-faint: rgba(255,0,128,0.08);
  --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);
}