/* ═══ variables.css — Design Tokens (shadcn/ui Zinc) + Reset ═══ */

/* ============================================================
   DARK MODE (default)
   ============================================================ */
:root {
    /* === SUPERFICIES (Zinc scale) === */
    --background:       #09090b;   /* zinc-950 */
    --bg-card:          #18181b;   /* zinc-900 */
    --bg-popover:       #18181b;
    --bg-muted:         #27272a;   /* zinc-800 */
    --bg-hover:         #3f3f46;   /* zinc-700 */
    --bg-active:        #52525b;   /* zinc-600 */

    /* === BORDES === */
    --border:           #27272a;
    --border-hover:     #3f3f46;
    --border-input:     #3f3f46;
    --border-focus:     #a1a1aa;   /* zinc-400 */
    --ring:             #d4d4d8;   /* zinc-300 */

    /* === TEXTO === */
    --text-primary:     #fafafa;   /* zinc-50 */
    --text-secondary:   #a1a1aa;   /* zinc-400 */
    --text-muted:       #71717a;   /* zinc-500 */
    --text-disabled:    #52525b;   /* zinc-600 */

    /* === PRIMARY (alto contraste para CTAs) === */
    --primary:          #fafafa;
    --primary-hover:    #e4e4e7;
    --primary-text:     #09090b;

    /* === SEMANTICOS === */
    --destructive:       #ef4444;
    --destructive-hover: #dc2626;
    --destructive-muted: #7f1d1d;
    --success:           #22c55e;
    --success-muted:     #14532d;
    --warning:           #eab308;
    --warning-muted:     #713f12;
    --info:              #3b82f6;
    --info-muted:        #1e3a5f;
    --purple:            #a855f7;
    --purple-muted:      #3b0764;

    /* === SIDEBAR === */
    --sidebar-bg:            #09090b;
    --sidebar-border:        #27272a;
    --sidebar-item-hover:    #27272a;
    --sidebar-item-active:   #27272a;
    --sidebar-text:          #a1a1aa;
    --sidebar-text-active:   #fafafa;
    --sidebar-icon:          #71717a;
    --sidebar-icon-active:   #fafafa;

    /* === RADIUS === */
    --radius-sm:        4px;
    --radius-md:        6px;
    --radius-lg:        8px;
    --radius-xl:        12px;
    --radius-full:      9999px;

    /* === SOMBRAS (minimas) === */
    --shadow-sm:        0 1px 2px 0 rgba(0,0,0,0.4);
    --shadow-md:        0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --shadow-lg:        0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);

    /* === TIPOGRAFIA === */
    --font-sans:        'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-xs:     0.75rem;
    --font-size-sm:     0.8125rem;
    --font-size-base:   0.875rem;
    --font-size-lg:     1rem;
    --font-size-xl:     1.125rem;
    --font-size-2xl:    1.5rem;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;

    /* === ESPACIADO === */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;

    /* === TRANSICIONES === */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================================
       ALIAS DE COMPATIBILIDAD (legacy — no eliminar)
       Mantiene los 1,400+ usos existentes funcionando con los nuevos tokens.
       ============================================================ */
    --bg:              var(--background);
    --bg2:             var(--bg-card);
    --bg3:             var(--bg-muted);
    --surface:         var(--bg-card);
    --surface2:        var(--bg-muted);
    --text:            var(--text-primary);
    --text2:           var(--text-secondary);
    --text3:           var(--text-muted);
    --claude:          var(--primary);
    --claude2:         var(--primary-hover);
    --claude3:         var(--primary);
    --claude-glow:     transparent;
    --green:           var(--success);
    --green2:          #16a34a;
    --red:             var(--destructive);
    --yellow:          var(--warning);
    --blue:            var(--info);
    --cyan:            #06b6d4;
    --border2:         var(--border-hover);
    --border-strong:   var(--border-hover);
    --glass-bg:        var(--bg-card);
    --glass-bg-soft:   var(--bg-muted);
    --glass-bg-strong: var(--bg-card);
    --glass-border:    var(--border);
    --glass-highlight: none;
    --glass-blur:      none;
    --glass-blur-strong: none;
    --sp-1:            var(--space-1);
    --sp-2:            var(--space-2);
    --sp-3:            var(--space-3);
    --sp-4:            var(--space-4);
    --sp-5:            var(--space-6);
    --sp-6:            var(--space-8);
    --sp-7:            var(--space-12);
    --sp-8:            64px;
    --r-1:             var(--radius-sm);
    --r-2:             var(--radius-md);
    --r-3:             var(--radius-lg);
    --r-4:             var(--radius-xl);
    --r-5:             16px;
    --r-pill:          var(--radius-full);
    --shadow-1:        var(--shadow-sm);
    --shadow-2:        var(--shadow-sm);
    --shadow-3:        var(--shadow-md);
    --shadow-4:        var(--shadow-lg);
    --shadow-glow:     none;
    --ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:        cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:        var(--transition-fast);
    --dur:             var(--transition-normal);
    --dur-slow:        var(--transition-slow);
    --sans:            var(--font-sans);
    --mono:            var(--font-mono);

    /* ============================================================
       CLAUDE DESIGN REFRESH — TOKENS NUEVOS (aditivos, Capa 1)
       Source: claude_design_raw/tokens.css (proyecto claude.ai/design
       986dd2ca-356d-47ad-82c1-ac07c326031e).
       No pisa nada existente — solo agrega primitives nuevos para que
       `refresh.css` (Capa 2) pueda usarlos sin romper clases legacy.
       ============================================================ */

    /* Surfaces nuevas (jerarquia visual extendida) */
    --bg-app:           var(--background);     /* alias sema (zinc-950) */
    --bg-surface:       var(--bg-card);        /* alias sema (zinc-900) */
    --bg-elevated:      #1f1f23;               /* hero cards, entre 900 y 800 */
    --bg-inset:         #0e0e10;               /* wells / inputs dentro de cards */

    /* Bordes nuevos — compat con sistema Claude Design */
    --border-subtle:    #1f1f23;
    --border-default:   var(--border);         /* alias (zinc-800) */

    /* Colores semanticos expuestos sin prefijo (Claude Design usa nombres directos) */
    --amber:            var(--warning);        /* #eab308 */
    --orange:           #f97316;
    --pink:             #ec4899;

    /* Tints 14% — fondo de pills, badges, anchors de data-viz */
    --green-tint:       rgb(34 197 94 / .14);
    --red-tint:         rgb(239 68 68 / .14);
    --amber-tint:       rgb(234 179 8 / .14);
    --blue-tint:        rgb(59 130 246 / .14);
    --purple-tint:      rgb(168 85 247 / .14);
    --orange-tint:      rgb(249 115 22 / .14);

    /* Edges 28% — bordes de pills / badges semánticos */
    --green-edge:       rgb(34 197 94 / .28);
    --red-edge:         rgb(239 68 68 / .28);
    --amber-edge:       rgb(234 179 8 / .28);
    --blue-edge:        rgb(59 130 246 / .28);
    --purple-edge:      rgb(168 85 247 / .28);

    /* Tipografia — escala extendida */
    --fs-display:       44px;                  /* KPI display gigante */
    --fs-h1:            28px;                  /* hero heading */
    --fs-h2:            20px;
    --fs-h3:            16px;
    --fs-body:          14px;
    --fs-small:         13px;
    --fs-mono:          12.5px;
    --fs-micro:         11px;

    --fw-regular:       400;
    --fw-medium:        500;
    --fw-semi:          600;
    --fw-bold:          700;

    --lh-tight:         1.1;
    --lh-snug:          1.3;
    --lh-normal:        1.5;

    --tr-tight:         -0.02em;
    --tr-normal:        0;
    --tr-wide:          0.04em;
    --tr-wider:         0.08em;

    /* Shadow "pop" — modales flotantes / popovers */
    --sh-0:             none;
    --sh-1:             var(--shadow-sm);
    --sh-2:             0 4px 12px -4px rgb(0 0 0 / .5), 0 1px 0 0 rgb(255 255 255 / .02) inset;
    --sh-pop:           0 16px 48px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);

    /* Motion extendida (easing mas natural para animaciones) */
    --ease-out-soft:    cubic-bezier(.2, .7, .2, 1);
    --dur-1:            120ms;
    --dur-2:            200ms;

    /* Density — para tweak comfortable vs compact */
    --density-row:          36px;
    --density-gap:          12px;
    --density-card-pad:     20px;

    /* Sidebar widths (Claude Design spec) */
    --sidebar-expanded:     240px;
    --sidebar-collapsed:    56px;
}

/* ============================================================
   DENSITY COMPACT — tweak aplicable via [data-density="compact"]
   en <html>. Persistido en localStorage por Tweaks panel (Capa 3).
   ============================================================ */
[data-density="compact"] {
    --density-row:          28px;
    --density-gap:          8px;
    --density-card-pad:     14px;
    --fs-body:              13px;
    --fs-small:             12px;
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
[data-theme="light"] {
    --background:       #ffffff;
    --bg-card:          #ffffff;
    --bg-popover:       #ffffff;
    --bg-muted:         #f4f4f5;
    --bg-hover:         #e4e4e7;
    --bg-active:        #d4d4d8;

    --border:           #e4e4e7;
    --border-hover:     #d4d4d8;
    --border-input:     #d4d4d8;
    --border-focus:     #71717a;
    --ring:             #18181b;

    --text-primary:     #09090b;
    --text-secondary:   #52525b;
    --text-muted:       #71717a;
    --text-disabled:    #a1a1aa;

    --primary:          #18181b;
    --primary-hover:    #27272a;
    --primary-text:     #fafafa;

    --destructive:       #ef4444;
    --destructive-hover: #dc2626;
    --destructive-muted: #fef2f2;
    --success:           #16a34a;
    --success-muted:     #f0fdf4;
    --warning:           #ca8a04;
    --warning-muted:     #fefce8;
    --info:              #2563eb;
    --info-muted:        #eff6ff;
    --purple:            #9333ea;
    --purple-muted:      #faf5ff;

    --sidebar-bg:            #ffffff;
    --sidebar-border:        #e4e4e7;
    --sidebar-item-hover:    #f4f4f5;
    --sidebar-item-active:   #f4f4f5;
    --sidebar-text:          #52525b;
    --sidebar-text-active:   #09090b;
    --sidebar-icon:          #71717a;
    --sidebar-icon-active:   #09090b;

    --shadow-sm:        0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:        0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg:        0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Aliases legacy — light mode ajusta automaticamente al cambiar las primitives */
    --green2:          #15803d;
    --cyan:            #0891b2;

    /* --- Claude Design refresh — light mode --- */
    --bg-elevated:     #ffffff;
    --bg-inset:        #f4f4f5;
    --border-subtle:   #f4f4f5;
    --border-default:  var(--border);

    /* Tints mas sutiles en light (los solidos saturan menos sobre blanco) */
    --green-tint:      rgb(34 197 94 / .12);
    --red-tint:        rgb(239 68 68 / .10);
    --amber-tint:      rgb(234 179 8 / .16);
    --blue-tint:       rgb(59 130 246 / .10);
    --purple-tint:     rgb(168 85 247 / .10);
    --orange-tint:     rgb(249 115 22 / .10);

    /* Shadows ajustadas para fondo claro */
    --sh-2:            0 4px 12px -4px rgb(0 0 0 / .08), 0 1px 0 0 rgb(0 0 0 / .04);
    --sh-pop:          0 16px 48px -12px rgb(0 0 0 / .18);
}

/* ============================================================
   RESET GLOBAL
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--background);
    display: flex;
    min-height: 100vh;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.025em;
    color: var(--text-primary);
}
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

::selection {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ============================================================
   UTILIDADES GLASS (legacy — ahora planas, sin blur)
   Mantiene compatibilidad con clases .glass aplicadas en HTML/JS.
   ============================================================ */
.glass, .glass-soft, .glass-strong {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}