/* ─────────────────────────────────────── */
/* CSS VARIABLES - Tema MOOLE             */
/* ─────────────────────────────────────── */

@font-face {
    font-family: 'Cocogoose';
    src: url('../fonts/cocogooseprotrial.ttf') format('truetype');
}

:root {
    /* Colores */
    --black: #080808;
    --black2: #111111;
    --black3: #1A1A1A;
    --lime: #C8FF00;
    --lime-dark: #9AC500;
    --white: #F0EDE8;
    --gray: #888888;
    --gray2: #555555;
    --red: #FF2D2D;
    
    /* Fuentes */
    --font-display: 'Cocogoose', 'Bebas Neue', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    
    /* Espaciado */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 100px;
    
    /* Bordes */
    --border-thin: 1px;
    --border-medium: 2px;
    
    /* Transiciones */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* TEMA CLARO */
[data-theme="light"] {
    --black: #F5F3F0;
    --black2: #FFFFFF;
    --black3: #EAE6DF;
    --white: #111111;
    --lime: #A3D100; /* Fondo más oscuro para contraste */
    --lime-dark: #81A800;
    --gray: #666666;
    --gray2: #CCCCCC;
}

[data-theme="light"] body::before {
    opacity: 0.1;
}

[data-theme="light"] .hero-bg {
    background:
        radial-gradient(ellipse 60% 60% at 80% 40%, rgba(163, 209, 0, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 20% 70%, rgba(163, 209, 0, 0.08) 0%, transparent 50%);
}

[data-theme="light"] .hero-number {
    color: rgba(163, 209, 0, 0.1);
}

[data-theme="light"] .tab-btn {
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--gray);
}
[data-theme="light"] .tab-btn:hover {
    border-color: var(--lime);
}
[data-theme="light"] .tab-btn.active {
    color: #fff;
    border-color: var(--lime);
    background: var(--lime);
}

[data-theme="light"] .product-placeholder {
    color: rgba(0,0,0,0.05);
}
[data-theme="light"] .product-tag {
    color: #fff;
}
[data-theme="light"] .tag-new, 
[data-theme="light"] .tag-sold {
    color: #fff;
}

/* Reset y estilos base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

img {
    display: block;
    width: 100%;
    object-fit: cover;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--black);
}

::-webkit-scrollbar-thumb {
    background: var(--lime);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d4ff1e;
}

/* ─── GRAIN OVERLAY ─── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}