/* ============================================================
   variables.css  —  Tokens de diseño centralizados (BEM Layer 0)
   Cambiar un color o tamaño aquí afecta a toda la app.
   ============================================================ */

:root {
    /* Brand / colores base */
    --c-primary: #4A90E2;
    --c-primary-dark: #357ABD;
    --c-secondary: #50C878;
    --c-accent: #F5A623;

    /* Gradientes (reutilizables) */
    --g-brand: linear-gradient(135deg, #667eea, #764ba2);
    --g-brand-soft: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
    --g-success: linear-gradient(135deg, #50C878, #3CB371);

    /* Superficies */
    --c-bg: #F8FAFC;
    --c-surface: #FFFFFF;
    --c-surface-dark: #2C3E50;
    --c-border: #E1E8ED;

    /* Texto */
    --c-text: #2C3E50;
    --c-text-muted: #7F8C8D;
    --c-on-brand: #FFFFFF;

    /* Estados */
    --c-error: #C0392B;
    --c-error-bg: #FFF1F0;
    --c-error-border: #FFCCC7;
    --c-success: #1E7E45;
    --c-success-bg: #E8F8F0;
    --c-success-border: #B7E6C5;
    --c-warning: #9A6700;
    --c-warning-bg: #FFF8E1;
    --c-warning-border: #FFE082;
    --c-info: #4A3AA0;
    --c-info-bg: #EDEAFE;

    /* Tipografía */
    --ff-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ff-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.82rem;
    --fs-base: 0.92rem;
    --fs-md: 1rem;
    --fs-lg: 1.3rem;
    --fs-xl: 1.6rem;
    --fs-2xl: 2.5rem;

    /* Espaciado (escala 4px) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* Radios */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;

    /* Sombras */
    --sh-soft: 0 4px 20px rgba(74, 144, 226, 0.10);
    --sh-card: 0 10px 40px rgba(102, 126, 234, 0.15);
    --sh-focus: 0 0 0 3px rgba(102, 126, 234, 0.15);
    --sh-hover: 0 8px 24px rgba(102, 126, 234, 0.35);

    /* Transiciones */
    --t-fast: 0.15s ease;
    --t-base: 0.25s ease;

    /* Tamaños de layout */
    --auth-card-w: 420px;
    --content-w: 760px;
    --settings-w: 680px;

    /* z-index escalonado */
    --z-base: 1;
    --z-header: 50;
    --z-overlay: 140;
    --z-drawer: 150;
}