/**
 * ============================================
 * TOKENS CSS - Manual IC y UI v2.1
 * Inventario Educativo - Entersolo
 * ============================================
 *
 * Sistema de diseno unificado basado en:
 * - Manual de Identidad Corporativa
 * - Estandar SaaS Premium 2025
 * - Clean Minimalist
 *
 * Compartido con Gestion Patrimonio.
 */

/* ============================================
   1. VARIABLES DE MARCA (Seccion 3.1)
   ============================================ */
:root {
    /* Colores Corporativos */
    --brand-blue: #1C3052;
    --brand-red: #E73C1E;

    /* UI Digital Extensions */
    --ui-interaction: #3B82F6;
    --ui-success: #10B981;
    --ui-warning: #F59E0B;
    --ui-error: #EF4444;

    /* Fondos */
    --ui-bg-light: #F5F7FA;

    /* Tipografia */
    --font-main: 'Inter', 'Solomon Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Espaciado (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Componentes */
    --card-padding: var(--space-xl);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;

    /* Transiciones */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* Light Mode */
    --bg-app: var(--ui-bg-light);
    --bg-elevated: #FFFFFF;

    /* Header */
    --header-bg: #FFFFFF;
    --header-border: rgba(28, 48, 82, 0.08);
    --header-shadow: 0 1px 3px rgba(28, 48, 82, 0.06),
                     0 4px 12px rgba(28, 48, 82, 0.04);

    /* Cards */
    --card-bg: #FFFFFF;
    --card-bg-hover: #FFFFFF;
    --card-border: rgba(28, 48, 82, 0.1);
    --card-border-hover: var(--ui-interaction);
    --card-shadow: 0 1px 3px rgba(28, 48, 82, 0.06),
                   0 4px 16px rgba(28, 48, 82, 0.06);
    --card-shadow-hover: 0 8px 24px rgba(28, 48, 82, 0.12),
                         0 16px 48px rgba(28, 48, 82, 0.08);

    /* Textos */
    --text-primary: var(--brand-blue);
    --text-secondary: #64748B;
    --text-tertiary: #94A3B8;
    --text-inverse: #FFFFFF;

    /* Iconos Duotone (Seccion 6.2) */
    --icon-stroke: var(--brand-blue);
    --icon-fill: rgba(28, 48, 82, 0.12);
    --icon-fill-hover: rgba(59, 130, 246, 0.15);

    /* Inputs & Controls */
    --input-bg: rgba(28, 48, 82, 0.04);
    --input-border: rgba(28, 48, 82, 0.12);
    --input-border-focus: var(--ui-interaction);
    --input-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ============================================
   2. RESET & BASE
   ============================================ */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-main);
    background: var(--bg-app);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}

/* ============================================
   3. FOCUS STATES - Accesibilidad
   ============================================ */
:focus-visible {
    outline: 2px solid var(--ui-interaction);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ui-interaction);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* ============================================
   4. REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}