/**
 * INMO Academy - CSS Variables
 * Paleta de colores, espacios y utilidades
 */

:root {
    /* ========== COLORES PRINCIPALES ========== */
    --color-primary: #c8102e;           /* Rojo INMO */
    --color-primary-light: #e63946;     /* Rojo más claro */
    --color-primary-dark: #a00824;      /* Rojo más oscuro */

    --color-dark: #0a0a0a;              /* Negro profesional */
    --color-dark-light: #1a1a1a;        /* Negro más claro */

    --color-light: #ffffff;             /* Blanco */
    --color-gray: #f5f5f5;              /* Gris muy claro */
    --color-gray-light: #efefef;        /* Gris claro */
    --color-gray-medium: #cccccc;       /* Gris medio */
    --color-gray-dark: #333333;         /* Gris oscuro */

    --color-accent: #ffc300;            /* Dorado (secundario) */
    --color-success: #28a745;           /* Verde éxito */
    --color-warning: #ffc107;           /* Amarillo alerta */
    --color-danger: #dc3545;            /* Rojo peligro */
    --color-info: #17a2b8;              /* Cyan info */

    /* ========== ESPACIOS ========== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 96px;

    /* ========== BORDES REDONDEADOS ========== */
    --radius-sm: 8px;                   /* Pequeños inputs, badges */
    --radius-md: 12px;                  /* Cards standard */
    --radius-lg: 16px;                  /* Hero sections */
    --radius-xl: 20px;                  /* Elementos grandes */
    --radius-full: 50px;                /* Botones pill, avatares */
    --radius-circle: 50%;               /* Círculos perfectos */

    /* ========== SOMBRAS ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.3);

    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ========== TIPOGRAFÍA ========== */
    --font-primary: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-secondary: 'Cinzel', Georgia, serif;
    --font-mono: 'Courier New', monospace;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;
    --font-size-5xl: 64px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ========== TRANSICIONES ========== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ========== BREAKPOINTS (mobile-first) ========== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ========== ANCHO MÁXIMO ========== */
    --container-width: 1200px;
    --container-padding: var(--space-lg);

    /* ========== OTROS ========== */
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;
}

/* ========== DARK MODE ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-gray: #1a1a1a;
        --color-gray-light: #2a2a2a;
        --color-gray-medium: #555555;
        --color-gray-dark: #cccccc;
    }
}

/* ========== UTILIDADES COMUNES ========== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-circle { border-radius: var(--radius-circle); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.text-gray { color: var(--color-gray-dark); }
.text-light { color: var(--color-light); }

.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-light); }
.bg-gray { background-color: var(--color-gray); }

.border-primary { border: 1px solid var(--color-primary); }
.border-gray { border: 1px solid var(--color-gray-medium); }
.border-dark { border: 1px solid var(--color-dark); }