/**
 * assets/css/variables.css
 * Design Tokens — CRM Ventas Tella
 * Sistema de diseño: Premium Light Mode con Sidebar Oscuro de Contraste
 * Fuentes: Outfit (headings y body)
 * 
 * REGLA: Nunca usar valores hardcoded en otros archivos CSS.
 *        Referenciar siempre estas variables.
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Colores principales (Light Mode) ─────────────────────────────────────── */
  --color-bg:           #F8FAFC;   /* Fondo base (gris slate ultra claro) */
  --color-primary:      #FFFFFF;   /* Superficie primaria (blanco puro) */
  --color-secondary:    #F1F5F9;   /* Superficie secundaria (gris claro) */
  --color-muted:        #E2E8F0;   /* Superficie atenuada */
  --color-border:       #E2E8F0;   /* Bordes y divisores */
  --color-border-light: #CBD5E1;   /* Bordes activos/hover */

  /* ── Texto (Alto Contraste) ──────────────────────────────────────────────── */
  --color-text:         #0F172A;   /* Texto primario (gris pizarra muy oscuro) */
  --color-text-muted:   #475569;   /* Texto secundario (slate medio) */
  --color-text-dim:     #94A3B8;   /* Texto muy atenuado/placeholder */

  /* ── Sidebar Exclusivo (Contraste Oscuro) ────────────────────────────────── */
  --sidebar-bg:           #0F172A; /* Pizarra oscuro profundo */
  --sidebar-border:       #1E293B; /* Borde oscuro */
  --sidebar-text:         #F8FAFC; /* Texto claro */
  --sidebar-text-muted:   #94A3B8; /* Texto atenuado claro */
  --sidebar-active-bg:    #6366F1; /* Morado/Índigo moderno */
  --sidebar-active-text:  #FFFFFF; /* Texto seleccionado blanco */
  --sidebar-hover-bg:     #1E293B; /* Fondo hover ítems del menú */

  /* ── Semánticos (Ajustados para Light Mode con esquemas pastel) ───────────── */
  --color-accent:       #6366F1;   /* Violeta/Indigo — tono principal de botones y enlaces */
  --color-accent-dark:  #4F46E5;   /* Violeta hover */
  --color-accent-glow:  rgba(99, 102, 241, 0.1);

  --color-success:      #10B981;   /* Verde — éxito */
  --color-success-bg:   #D1FAE5;
  --color-success-text: #065F46;

  --color-warning:      #F59E0B;   /* Amarillo — advertencia */
  --color-warning-bg:   #FEF3C7;
  --color-warning-text: #92400E;

  --color-info:         #3B82F6;   /* Azul — información */
  --color-info-bg:      #DBEAFE;
  --color-info-text:    #1E40AF;

  --color-danger:       #EF4444;   /* Rojo — error o cancelación */
  --color-danger-bg:    #FEE2E2;
  --color-danger-text:  #991B1B;

  --color-purple:       #8B5CF6;   /* Púrpura — gestiones */
  --color-purple-bg:    #F3E8FF;
  --color-purple-text:  #6B21A8;

  /* ── Estados de venta ───────────────────────────────────────────────────── */
  --estado-pendiente:   var(--color-purple);
  --estado-en-proceso:  var(--color-info);
  --estado-cancelada:   var(--color-danger);
  --estado-retomar:     var(--color-warning);
  --estado-alta:        var(--color-success);

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --font-heading:       'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:          'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:          'Outfit', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */

  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ── Espaciado (sistema 4px) ────────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Bordes y radios ────────────────────────────────────────────────────── */
  --radius-sm:  0.25rem;    /* 4px */
  --radius-md:  0.5rem;     /* 8px */
  --radius-lg:  0.75rem;    /* 12px */
  --radius-xl:  1rem;       /* 16px */
  --radius-full:9999px;

  /* ── Transiciones ───────────────────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-normal:  200ms ease;
  --transition-slow:    300ms ease;

  /* ── Sombras (Optimizadas para Light Mode) ───────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-accent: 0 0 16px rgba(99, 102, 241, 0.15);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --sidebar-width:        260px;
  --sidebar-collapsed:    70px;
  --navbar-height:        64px;
  --content-max-width:    100%;

  /* ── Z-index scale ──────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:20;
  --z-sticky:  40;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;
}