/* ============================================
   CineGeek Remaster - CSS Variables
   Paleta oficial CineGeek (rojos protagonistas)
   ============================================ */

:root {
    /* Escala de rojos (protagonista de la marca) */
    --red-950: #2c0000;
    --red-900: #450000;
    --red-800: #7a0000;
    --red-700: #a30000;
    --red-600: #c50000;
    --red-500: #e70000;   /* Rojo de marca */
    --red-400: #ff2b2b;
    --red-300: #ff5c5c;
    --red-200: #ff9494;
    --red-100: #ffcccc;

    /* Colores principales */
    --color-primary: var(--red-500);
    --color-primary-dark: var(--red-700);
    --color-primary-light: var(--red-400);
    --color-secondary: #1a1216;
    --color-accent: #f6bb00;
    --color-star-rating: #f5c518;

    /* Fondos (tinte cálido/rojizo en lugar de azul frío) */
    --bg-dark: #0c0808;
    --bg-surface: #14100f;
    --bg-card: #1a1416;
    --bg-card-hover: #251c1e;
    --bg-elevated: #302225;
    --bg-overlay: rgba(12, 8, 8, 0.88);
    --bg-white: #ffffff;
    --bg-light: #f5f5f7;
    --bg-light-alt: #eaeaef;

    /* Texto */
    --text-primary: #ffffff;
    --text-secondary: #bfadad;
    --text-muted: #7a6565;
    --text-inverse: #0c0808;
    --text-link: var(--red-500);

    /* Categorías */
    --cat-noticias: #e70000;
    --cat-resenas: #6c5ce7;
    --cat-articulos: #f6bb00;

    /* Bordes */
    --border-color: rgba(255, 255, 255, 0.07);
    --border-light: rgba(255, 255, 255, 0.11);
    --border-accent: var(--color-primary);
    --border-warm: rgba(231, 0, 0, 0.12);

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(231, 0, 0, 0.3);
    --shadow-glow-sm: 0 0 10px rgba(231, 0, 0, 0.15);
    --shadow-glow-lg: 0 0 40px rgba(231, 0, 0, 0.25);

    /* Tipografía */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-heading: 'Space Grotesk', var(--font-primary);
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Bordes redondeados */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container-max: 1320px;
    --container-narrow: 880px;
    --header-height: 70px;
    --sidebar-width: 300px;

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}