/* =====================================================================
   LYSTO DESIGN TOKENS
   =====================================================================
   Archivo central de la nueva identidad visual de Lysto (admin).
   
   Se carga DESPUÉS de Bootstrap y app.css para sobreescribir variables
   de forma progresiva sin romper nada existente.
   
   Convención:
     --lysto-*  → Tokens propios de Lysto (nuevos)
     --bs-*     → Sobreescrituras de Bootstrap para alinear con la identidad
     --color-*, --bg-*, --text-*, --space-*, --radius-*, --shadow-*
                → Aliases del ui-kit de referencia (disponibles en la app)
   ===================================================================== */

:root {
    /* ─── Color Primario ─────────────────────────────────────────────── */
    --lysto-primary: #84CC16;
    --lysto-primary-hover: #6DBA10;
    --lysto-primary-active: #5C9D0D;
    --lysto-primary-light: rgba(132, 204, 22, 0.1);
    --lysto-primary-text: #ffffff;

    /* Alinear Bootstrap al nuevo verde */
    --bs-primary: #84CC16;
    --bs-primary-rgb: 132, 204, 22;

    /* ─── Estados Semánticos ──────────────────────────────────────────── */
    --lysto-success: #22C55E;
    --lysto-success-light: rgba(34, 197, 94, 0.1);
    --lysto-warning: #F59E0B;
    --lysto-warning-light: rgba(245, 158, 11, 0.1);
    --lysto-danger: #EF4444;
    --lysto-danger-light: rgba(239, 68, 68, 0.1);
    --lysto-info: #3B82F6;
    --lysto-info-light: rgba(59, 130, 246, 0.1);

    /* ─── Neutrales (Light Mode) ─────────────────────────────────────── */
    --lysto-bg-body: #F8FAFC;
    --lysto-bg-surface: #FFFFFF;
    --lysto-bg-surface-secondary: #F1F5F9;

    --lysto-border-color: #E5E7EB;

    --lysto-text-primary: #1F2937;
    --lysto-text-secondary: #6B7280;
    --lysto-text-muted: #9CA3AF;

    /* ─── Tipografía ─────────────────────────────────────────────────── */
    --lysto-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ─── Espaciado (Spacing Scale) ───────────────────────────────────── */
    --lysto-space-4: 0.25rem;
    --lysto-space-8: 0.5rem;
    --lysto-space-12: 0.75rem;
    --lysto-space-16: 1rem;
    --lysto-space-24: 1.5rem;
    --lysto-space-32: 2rem;
    --lysto-space-48: 3rem;

    /* ─── Border Radius ──────────────────────────────────────────────── */
    --lysto-radius-xs: 4px;
    --lysto-radius-sm: 6px;
    --lysto-radius-md: 8px;
    --lysto-radius-lg: 12px;
    --lysto-radius-xl: 16px;
    --lysto-radius-pill: 9999px;

    /* ─── Sombras ─────────────────────────────────────────────────────── */
    --lysto-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --lysto-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --lysto-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* ─── Transiciones ────────────────────────────────────────────────── */
    --lysto-transition-fast: 0.15s ease;
    --lysto-transition-normal: 0.25s ease;

    /* ═══════════════════════════════════════════════════════════════════
       UI-KIT ALIASES — Nombres del ui-kit.css de referencia
       Permiten usar los mismos nombres que el design system standalone.
       ═══════════════════════════════════════════════════════════════════ */

    /* Colores */
    --color-primary: #84CC16;
    --color-primary-hover: #6DBA10;
    --color-primary-active: #5C9D0D;
    --color-primary-light: rgba(132, 204, 22, 0.1);
    --color-primary-text: #ffffff;
    --color-success: #22C55E;
    --color-success-light: rgba(34, 197, 94, 0.1);
    --color-warning: #F59E0B;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-danger: #EF4444;
    --color-danger-light: rgba(239, 68, 68, 0.1);
    --color-info: #3B82F6;

    /* Superficies */
    --bg-body: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-secondary: #F1F5F9;

    /* Bordes */
    --border-color: #E5E7EB;

    /* Textos */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;

    /* Espaciado */
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

    /* Tipografía */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}


/* =====================================================================
   DARK MODE — Sobreescritura de neutrales
   =====================================================================
   Se activa con el atributo html[data-bs-theme="dark"] que ya usa el
   proyecto (Bootstrap 5.3). Solo cambian los neutrales, los colores
   semánticos y el primario se mantienen. 
   ===================================================================== */

html[data-bs-theme="dark"] {
    --lysto-bg-body: #0a0a0a;
    --lysto-bg-surface: #171717;
    --lysto-bg-surface-secondary: #262626;

    --lysto-border-color: #333333;

    --lysto-text-primary: #f5f5f5;
    --lysto-text-secondary: #a3a3a3;
    --lysto-text-muted: #737373;

    --lysto-primary-text: #000000;

    /* UI-KIT dark aliases */
    --bg-body: #0a0a0a;
    --bg-surface: #171717;
    --bg-surface-secondary: #262626;
    --border-color: #333333;
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --color-primary-text: #000000;
}


/* =====================================================================
   BOOTSTRAP BRIDGE — Conectar tokens Lysto → variables Bootstrap
   =====================================================================
   Esto permite que los componentes de Bootstrap existentes (cards,
   buttons, badges, forms, etc.) empiecen a consumir nuestros tokens
   sin necesidad de re-escribir cada componente.
   ===================================================================== */

:root {
    /* Tipografía */
    --bs-font-sans-serif: var(--lysto-font-family);
    --bs-body-font-family: var(--lysto-font-family);

    /* Colores Bootstrap -> Lysto */
    --bs-primary: var(--lysto-primary);
    --bs-success: var(--lysto-success);
    --bs-warning: var(--lysto-warning);
    --bs-danger: var(--lysto-danger);
    --bs-info: var(--lysto-info);

    /* Bordes */
    --bs-border-color: var(--lysto-border-color);
    --bs-border-radius: var(--lysto-radius-md);
    --bs-border-radius-sm: var(--lysto-radius-sm);
    --bs-border-radius-lg: var(--lysto-radius-lg);
    --bs-border-radius-xl: var(--lysto-radius-xl);
    --bs-border-radius-pill: var(--lysto-radius-pill);
}