/* ============================================================
   CRM Meta Leads V2 — Design Tokens
   Paleta y constantes del design system "SaaS Premium".
   Todo el CSS de la app consume estas variables.
   ============================================================ */

:root {
    /* ---- Superficies ---- */
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-2: #fbfcfe;
    --sidebar-bg: #101322;
    --sidebar-bg-2: #1a1f35;
    --sidebar-grad: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);

    /* ---- Marca / acción ---- */
    --primary: #635bff;
    --primary-600: #5249e8;
    --primary-700: #443bd4;
    --primary-soft: #efeeff;
    --primary-glow: rgba(99, 91, 255, .35);
    --accent-grad: linear-gradient(135deg, #635bff 0%, #8b5cf6 100%);

    /* ---- Semánticos ---- */
    --success: #10b981;
    --success-soft: #e7f8f2;
    --warning: #f59e0b;
    --warning-soft: #fef3e0;
    --danger: #ef4444;
    --danger-soft: #fdeaea;
    --info: #38bdf8;
    --info-soft: #e8f7fe;

    /* ---- Texto ---- */
    --text: #0f172a;
    --text-2: #64748b;
    --text-3: #94a3b8;
    --text-inverse: #e2e8f0;

    /* ---- Bordes y sombras ---- */
    --border: #e7eaf0;
    --border-2: #f1f3f8;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 12px rgba(16, 24, 40, .05);
    --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .14);
    --shadow-primary: 0 8px 20px -6px var(--primary-glow);

    /* ---- Geometría ---- */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Movimiento ---- */
    --transition: 180ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 320ms cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* ---- Layout ---- */
    --sidebar-width: 248px;
    --sidebar-rail: 72px;
    --navbar-height: 64px;
    --content-max: 1600px;

    /* ---- Tipografía ---- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ---- Overrides de Bootstrap 5.3 ---- */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--border);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 99, 91, 255;
    --bs-success-rgb: 16, 185, 129;
    --bs-danger-rgb: 239, 68, 68;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info-rgb: 56, 189, 248;
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-600);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
}