/* ==========================================================================
   HÁBITOSGALI — SISTEMA UNIVERSAL DE TOKENS DE DISEÑO
   Basado en las directrices de Diseño.md (Estilo Apple & Enterprise Grade)
   ========================================================================== */

:root {
  /* ========================================================================
     1. IDENTIDAD DE MARCA Y ACENTOS
     ======================================================================== */
  --primary: #6366f1;                           /* Índigo institucional elegante */
  --primary-hover: #4f46e5;                     /* Estado hover */
  --primary-active: #4338ca;                    /* Estado pulsado (:active) */
  --primary-subtle: rgba(99, 102, 241, 0.12);   /* Fondo suave con acento */
  --primary-contrast: #ffffff;                  /* Color del texto sobre primario */

  --accent-cyan: #06b6d4;                       /* Acento cian alineado al avatar 3D */
  --accent-cyan-subtle: rgba(6, 182, 212, 0.12);
  --accent-violet: #8b5cf6;                     /* Acento violeta profundo */
  --accent-violet-subtle: rgba(139, 92, 246, 0.12);

  /* ========================================================================
     2. SUPERFICIES Y FONDOS (Tema Oscuro Obsidiana por Defecto)
     ======================================================================== */
  --bg-main: #0a0c10;                           /* Obsidiana mate profundo */
  --bg-surface: #12151d;                        /* Superficie de tarjeta elevada */
  --bg-surface-elevated: #181d28;               /* Paneles en segundo nivel */
  --bg-soft: #1e2433;                           /* Inputs y controles secundarios */
  --bg-muted: #272f42;                          /* Elementos silenciados */
  --bg-glass: rgba(18, 21, 29, 0.72);           /* Vidrio deslustrado */

  /* ========================================================================
     3. JERARQUÍA TIPOGRÁFICA
     ======================================================================== */
  --text-main: #f3f4f8;                         /* Texto de lectura principal */
  --text-soft: #9da4b4;                         /* Texto secundario y etiquetas */
  --text-muted: #646e82;                        /* Metadatos y fechas */
  --text-inverse: #0a0c10;                      /* Texto sobre fondos blancos */

  /* ========================================================================
     4. BORDES ULTRAFINOS HAIRLINE (1px de precisión)
     ======================================================================== */
  --surface-border: rgba(255, 255, 255, 0.08);  /* Delimitador de tarjetas (1px) */
  --surface-border-strong: rgba(255, 255, 255, 0.16); /* Focos e inputs activos */
  --surface-border-accent: rgba(99, 102, 241, 0.35); /* Borde con acento de marca */

  /* ========================================================================
     5. ESTADOS FUNCIONALES
     ======================================================================== */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.12);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);

  /* ========================================================================
     6. ESCALA DE ESPACIADOS (Múltiplos de 4px / 8px)
     ======================================================================== */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ========================================================================
     7. RADIOS CONCÉNTRICOS CONTINUOS (Squircles)
     ======================================================================== */
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ========================================================================
     8. TIPOGRAFÍA TÉCNICA
     ======================================================================== */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Sora', var(--font-main);
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ========================================================================
     9. SOMBRAS ORGÁNICAS SUTILES
     ======================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 36px -4px rgba(0, 0, 0, 0.65), 0 2px 6px 0 rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.25);

  /* ========================================================================
     10. FÍSICA DE TRANSICIONES (FLUIDEZ ULTRA-SUAVE ESTILO VISIONOS)
     ======================================================================== */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-card: cubic-bezier(0.25, 1, 0.35, 1);
  --transition-fast: 280ms var(--ease-smooth);
  --transition-normal: 440ms var(--ease-smooth);
  --transition-slow: 700ms var(--ease-smooth);

  /* ========================================================================
     11. LAYOUT Y CONTENCIÓN (ANCHO COMPLETO ESTILO CURATED / PEACHWEB)
     ======================================================================== */
  --shell-max-width: 1560px;
  --shell-padding: clamp(16px, 4vw, 64px);

  /* ========================================================================
     12. TOKENS AVANZADOS DE LIQUID GLASS (VIDRIO LÍQUIDO CRISTALINO ULTRA-TRANSPARENTE)
     ======================================================================== */
  --liquid-glass-bg: rgba(12, 16, 26, 0.36);
  --liquid-glass-bg-hover: rgba(16, 22, 36, 0.48);
  --liquid-glass-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.005) 100%);
  --liquid-glass-border: rgba(255, 255, 255, 0.11);
  --liquid-glass-border-hover: rgba(255, 255, 255, 0.28);
  --liquid-glass-border-accent: rgba(99, 102, 241, 0.45);
  --liquid-glass-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.35);
  --liquid-glass-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --liquid-glass-shadow-hover: 0 24px 60px -10px rgba(0, 0, 0, 0.7), 0 0 40px -5px rgba(99, 102, 241, 0.22);
  --liquid-glass-blur: blur(20px) saturate(180%);
  --liquid-glass-pill-bg: rgba(255, 255, 255, 0.05);
  --liquid-glass-pill-hover: rgba(255, 255, 255, 0.12);

  /* Colores emocionales del aura viva del robot */
  --aura-neutral: rgba(6, 182, 212, 0.24);
  --aura-feliz: rgba(16, 185, 129, 0.28);
  --aura-enfoque: rgba(245, 158, 11, 0.28);
  --aura-sorpresa: rgba(192, 132, 252, 0.30);
  --aura-complicidad: rgba(99, 102, 241, 0.32);
}