/* ============================================ */
/* VARIABLES CSS — PREMIUM 2026                 */
/* Sistema de diseño Luxury Tech Store          */
/* ============================================ */

:root {
    color-scheme: dark;

    /* ── LAYOUT ───────────────────────────────── */
    --header-height: 70px;
    --container-max-width: 1280px;

    /* ── TIPOGRAFÍA ──────────────────────────── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --line-height: 1.6;
    --line-height-tight: 1.08;
    --line-height-relaxed: 1.7;
    --letter-spacing: -0.04em;
    --letter-spacing-wide: 0.02em;

    /* ── COLORES PRINCIPALES ─────────────────── */
    --color-primary: #E8192C;
    --color-primary-rgb: 232, 25, 44;
    --color-primary-dark: #B91222;
    --color-primary-light: #FF5B68;
    --color-primary-glow: rgba(var(--color-primary-rgb), 0.35);

    /* ── COLORES SECUNDARIOS (Teal premium) ─── */
    --color-secondary: #FF6500;
    --color-secondary-rgb: 255, 101, 0;
    --color-secondary-dark: #D94F00;
    --color-secondary-glow: rgba(var(--color-secondary-rgb), 0.35);

    /* ── COLORES DE ACCENTO ──────────────────── */
    --color-accent: #FFD000;
    --color-accent-rgb: 255, 208, 0;
    --color-accent-dark: #D9AA00;

    /* ── COLORES DE ESTADO ───────────────────── */
    --color-success: #2ECC71;
    --color-success-rgb: 46, 204, 113;
    --color-warning: #F5C542;
    --color-warning-rgb: 245, 197, 66;
    --color-error: #FF5370;
    --color-error-rgb: 255, 83, 112;
    --color-info: #48CAFF;
    --color-info-rgb: 72, 202, 255;

    /* ── COLORES DE CATEGORÍA ────────────────── */
    --cat-laptops: #FF5B68;
    --cat-smartphones: #FF6500;
    --cat-accesorios: #FFD000;
    --cat-gaming: #25D366;

    /* ── FONDOS (TEMA OSCURO PREMIUM) ─────────── */
    --bg-dark: #090909;
    --bg-dark-rgb: 9, 9, 9;
    --bg-primary: #111111;
    --bg-primary-rgb: 17, 17, 17;
    --bg-card: #161616;
    --bg-card-hover: #202020;
    --bg-surface: #1C1C1C;
    --bg-input: #151515;

    /* ── COLORES DE TEXTO ────────────────────── */
    --text-primary: #FFFFFF;
    --text-secondary: #C2C2C2;
    --text-muted: #858585;
    --text-link: var(--color-accent);
    --text-on-primary: #06060A;

    /* ── BORDES ──────────────────────────────── */
    --border-color: rgba(255, 255, 255, 0.10);
    --border-focus: var(--color-primary);

    /* ── SOMBRAS ─────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 24px var(--color-primary-glow);
    --shadow-glow-strong: 0 0 48px var(--color-primary-glow);

    /* ── ESPACIADOS ──────────────────────────── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── BORDER RADIUS ───────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-bento: 18px;
    --radius-card: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── TRANSICIONES (Cinematic) ────────────── */
    --transition-fast: 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-normal: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-smooth: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-INDEX ─────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 350;
    --z-modal: 400;
    --z-toast: 500;
    --z-max: 600;

    /* ── DEGRADADOS PREMIUM ──────────────────── */
    --gradient-hero: radial-gradient(ellipse at 20% 40%, rgba(var(--color-primary-rgb), 0.18) 0%, transparent 60%),
                     radial-gradient(ellipse at 80% 10%, rgba(var(--color-secondary-rgb), 0.12) 0%, transparent 50%),
                     radial-gradient(ellipse at 50% 100%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 50%),
                     linear-gradient(180deg, #06060A 0%, #0A0A14 100%);

    --gradient-page: radial-gradient(ellipse at 15% 30%, rgba(var(--color-primary-rgb), 0.10) 0%, transparent 55%),
                     radial-gradient(ellipse at 85% 15%, rgba(var(--color-secondary-rgb), 0.06) 0%, transparent 45%),
                     linear-gradient(180deg, var(--bg-dark) 0%, #08080F 100%);
}