/* ═══════════════════════════════════════════════════════════════
   CPPA Hub — Design tokens
   Inspiración: Linear · Vercel · Notion · Apple
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Color base ── */
    --bg:            #ffffff;
    --surface:       #f8fafc;
    --surface-2:     #f1f5f9;
    --surface-3:     #e9eef5;
    --border:        #e8ebf0;
    --border-strong: #d6dbe4;

    /* ── Texto ── */
    --text:        #0f172a;   /* azul oscuro casi negro */
    --text-muted:  #64748b;
    --text-soft:   #94a3b8;
    --text-invert: #ffffff;

    /* ── Marca ── */
    --primary:        #1e293b;   /* azul oscuro */
    --primary-hover:  #0f172a;
    --accent:         #2563eb;   /* azul eléctrico */
    --accent-hover:   #1d4ed8;
    --accent-active:  #1e40af;
    --accent-soft:    #eff6ff;
    --accent-border:  #bfdbfe;

    /* ── Estados semánticos ── */
    --success:      #16a34a;
    --success-soft: #f0fdf4;
    --warning:      #d97706;
    --warning-soft: #fffbeb;
    --danger:       #dc2626;
    --danger-soft:  #fef2f2;
    --info:         #0891b2;
    --info-soft:    #ecfeff;
    --purple:       #7c3aed;
    --purple-soft:  #f5f3ff;

    /* ── Estados de tarea (Kanban) ── */
    --st-idea:        #8b5cf6;
    --st-pending:     #64748b;
    --st-research:    #0891b2;
    --st-design:      #db2777;
    --st-development: #2563eb;
    --st-testing:     #d97706;
    --st-blocked:     #dc2626;
    --st-done:        #16a34a;

    /* ── Tipografía ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    --fs-xs:   0.75rem;   /* 12 */
    --fs-sm:   0.8125rem; /* 13 */
    --fs-base: 0.875rem;  /* 14 */
    --fs-md:   0.9375rem; /* 15 */
    --fs-lg:   1.0625rem; /* 17 */
    --fs-xl:   1.25rem;   /* 20 */
    --fs-2xl:  1.5rem;    /* 24 */
    --fs-3xl:  1.875rem;  /* 30 */

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Espaciado ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ── Radios ── */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* ── Sombras (ligeras) ── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow:    0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.16);

    /* ── Transiciones ── */
    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t:      160ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout ── */
    --sidebar-w: 248px;
    --topbar-h:  60px;
    --content-max: 1280px;
    --z-sidebar: 40;
    --z-topbar:  30;
    --z-dropdown: 60;
    --z-modal:   80;
    --z-toast:   100;
}