@import url('font.css');

:root {
    
    --oasis-font: 'oasis', sans-serif;

--bg-hero-image: url(../../images/bg_hero.jpg) center center / cover no-repeat fixed;
    --bg-position-center: center center;
    --bg-blur: blur(3px);

--oasis-primary:              #F59E0B;   
    --oasis-primary-soft:         #FBBF24;   
    --oasis-primary-dark-effect:  #b45309;   
    --hero-header-font: 'oasis', sans-serif;
    --oasis-primary-dark:         #92400E;   

--oasis-accent-sun:           #FB923C;
    --oasis-accent-sun-soft:      #FDE047;
    --oasis-accent-coral:         #22D3EE;
    --oasis-accent-teal:          #34D399;   

--oasis-store-bg-dark: #694925;

--oasis-bg:             #191613;
    --oasis-surface:        #1a1816;
    --oasis-card:           #2d2823;
    --oasis-border:         #3d362e;
    --oasis-text:           #fff8e7;
    --oasis-text-secondary: #b1945f;
    --oasis-text-secondary-dark: #524839;
    --oasis-card-bg-active: rgba(245, 158, 11, 0.2);

--oasis-bg-light:       #ffe8b8;
    --oasis-surface-light:  rgba(255, 251, 235, 0.8);
    --oasis-card-light:     rgba(255, 255, 255, 0.9);
    --oasis-border-light:   #f4d58d;
    --oasis-text-light:     #745812;
    --oasis-text-secondary-light: #8b6914;

--oasis-text-main:      #f1f5f9;
    --oasis-text-muted:     #94a3b8;
    --oasis-text-dim:       #64748b;

--subscription-badge-bg: #FB923C;
    --lifetime-badge-bg:  #22D3EE;

--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;

    --pt-1: 0.25rem;
    --pt-2: 0.5rem;
    --pt-3: 0.75rem;
    --pt-4: 1rem;
    --pt-5: 1.25rem;
    --pt-6: 1.5rem;
    --pt-8: 2rem;
    --pt-10: 2.5rem;

--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Poppins', sans-serif;
    --font-oasis: 'oasis', sans-serif;
    
    --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;
    --text-7xl: 4.5rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.5);
    --shadow-glow-sun: 0 0 20px rgba(251, 191, 36, 0.6);
    --shadow-glow-coral: 0 0 20px rgba(34, 211, 238, 0.5);

--radius-sm: 0.375rem;
    --radius: 0.5rem; 
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 0.5rem;
    --radius-full: 9999px;

--transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

--z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-toast: 1000;

--blur-glass: blur(20px);
    --gradient-ocean: linear-gradient(135deg, #F59E0B 0%, #FB923C 100%); 
    --gradient-ocean-dark: linear-gradient(135deg, #92400E 0%, #451A03 100%);
    /*--gradient-ocean-dark: linear-gradient(135deg, #ff7f30 0%, #d75712 100%);*/
    --gradient-sunset: linear-gradient(135deg, #FB923C 0%, #FBBF24 100%);
    --gradient-tropical: linear-gradient(135deg, #34D399 0%, #22D3EE 100%);
}

.theme-christmas {
    --oasis-primary: #c41e3a;
    --oasis-primary-soft: #ff4d6d;
    --oasis-primary-dark: #8b1528;
    --oasis-accent-sun: #165b33;
    --oasis-accent-sun-soft: #2d8659;
}

.theme-halloween {
    --oasis-primary: #ff6b35;
    --oasis-primary-soft: #ffa07a;
    --oasis-primary-dark: #d84315;
    --oasis-accent-sun: #6a0dad;
    --oasis-accent-sun-soft: #9d4edd;
}

@media (max-width: 1024px) {
    :root {
        --text-7xl: 3.75rem;
        --text-6xl: 3rem;
        --text-5xl: 2.375rem;
        --text-4xl: 2rem;
    }
}

@media (max-width: 768px) {
    :root {
        --text-7xl: 3rem;
        --text-6xl: 2.25rem;
        --text-5xl: 1.875rem;
        --text-4xl: 1.625rem;
        --text-3xl: 1.375rem;
        --text-2xl: 1.25rem;
    }
}

@media (max-width: 480px) {
    :root {
        --text-7xl: 2.5rem;
        --text-6xl: 1.875rem;
        --text-5xl: 1.625rem;
        --text-4xl: 1.4375rem;
        --text-3xl: 1.25rem;
        --text-2xl: 1.125rem;
        --text-xl: 1rem;
    }
}

@media (max-width: 1200px) {
    .container { padding: 0 1.5rem; }
}
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
}
@media (max-width: 480px) {
    .container { padding: 0 1rem; }
}