/*
 * DabFlow Design System v1.0
 * Modern, Beautiful, Monetizable
 * Built with love by Claude AI
 */

/* === RESET === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === BASE FONT SIZE === */
html {
    font-size: 16px; /* Base size for desktop */
}

/* Responsive font sizing based on device */
@media screen and (max-width: 768px) {
    html {
        font-size: 14px; /* Smaller base for tablets */
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 13px; /* Even smaller for phones */
    }
}

@media screen and (max-width: 360px) {
    html {
        font-size: 12px; /* Smallest for small phones */
    }
}

/* === ROOT VARIABLES === */
:root {
    /* Brand Colors */
    --brand-cyan: #00F5FF;
    --brand-purple: #B026FF;
    --brand-gold: #FFD700;
    --brand-space: #0A0E27;

    /* Default Theme (Neon Cyber) */
    --theme-primary: #00F5FF;
    --theme-secondary: #B026FF;
    --theme-accent: #FFD700;
    --theme-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));

    /* Background System */
    --bg-primary: #0A0E27;
    --bg-secondary: #12162E;
    --bg-tertiary: #1A1F3A;
    --bg-card: #1E2442;
    --bg-card-hover: #252B4D;

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B8BFD8;
    --text-muted: #6B7394;
    --text-inverse: #0A0E27;

    /* Semantic Colors */
    --success: #00E676;
    --warning: #FFD54F;
    --error: #FF6B6B;
    --info: #4FC3F7;

    /* UI Elements */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 32px rgba(var(--theme-primary-rgb, 0, 245, 255), 0.5);

    /* Spacing Scale (8px base) */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-8: 3rem;     /* 48px */
    --space-10: 4rem;    /* 64px */

    /* Typography Scale */
    --font-xs: 0.75rem;     /* 12px */
    --font-sm: 0.875rem;    /* 14px */
    --font-base: 1rem;      /* 16px */
    --font-lg: 1.125rem;    /* 18px */
    --font-xl: 1.25rem;     /* 20px */
    --font-2xl: 1.5rem;     /* 24px */
    --font-3xl: 1.875rem;   /* 30px */
    --font-4xl: 2.25rem;    /* 36px */
    --font-5xl: 3rem;       /* 48px */
    --font-6xl: 3.75rem;    /* 60px */
    --font-7xl: 4.5rem;     /* 72px */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
}

/* === THEME VARIATIONS === */

/* Free Themes (12) */
[data-theme="neon-cyber"] {
    --theme-primary: #00F5FF;
    --theme-secondary: #B026FF;
    --theme-accent: #FFD700;
}

[data-theme="emerald-green"] {
    --theme-primary: #00E676;
    --theme-secondary: #00BFA5;
    --theme-accent: #76FF03;
}

[data-theme="sapphire-blue"] {
    --theme-primary: #2196F3;
    --theme-secondary: #00BCD4;
    --theme-accent: #82B1FF;
}

[data-theme="amethyst-purple"] {
    --theme-primary: #9C27B0;
    --theme-secondary: #7C4DFF;
    --theme-accent: #E040FB;
}

[data-theme="sunset-orange"] {
    --theme-primary: #FF9800;
    --theme-secondary: #FF5722;
    --theme-accent: #FFAB40;
}

[data-theme="bubblegum-pink"] {
    --theme-primary: #E91E63;
    --theme-secondary: #F06292;
    --theme-accent: #FF80AB;
}

[data-theme="ocean-teal"] {
    --theme-primary: #009688;
    --theme-secondary: #26A69A;
    --theme-accent: #64FFDA;
}

[data-theme="crimson-red"] {
    --theme-primary: #F44336;
    --theme-secondary: #E91E63;
    --theme-accent: #FF5252;
}

[data-theme="golden-amber"] {
    --theme-primary: #FFC107;
    --theme-secondary: #FF9800;
    --theme-accent: #FFD54F;
}

[data-theme="lime-volt"] {
    --theme-primary: #CDDC39;
    --theme-secondary: #8BC34A;
    --theme-accent: #EEFF41;
}

[data-theme="indigo-night"] {
    --theme-primary: #3F51B5;
    --theme-secondary: #5C6BC0;
    --theme-accent: #8C9EFF;
}

[data-theme="mint-fresh"] {
    --theme-primary: #4DB6AC;
    --theme-secondary: #80CBC4;
    --theme-accent: #A7FFEB;
}

/* Premium Themes (12) - Locked for Free Users */
[data-theme="aurora-borealis"] {
    --theme-primary: #00FFB3;
    --theme-secondary: #7B2FF7;
    --theme-accent: #FF006B;
    --bg-primary: #05050D;
    --bg-secondary: #0D0D1F;
}

[data-theme="lava-flow"] {
    --theme-primary: #FF4500;
    --theme-secondary: #FFD700;
    --theme-accent: #FF8C00;
    --bg-primary: #1A0A00;
    --bg-secondary: #2B1500;
}

[data-theme="ice-crystal"] {
    --theme-primary: #B3E5FC;
    --theme-secondary: #81D4FA;
    --theme-accent: #E1F5FE;
    --bg-primary: #0A1419;
    --bg-secondary: #0F1E26;
}

[data-theme="forest-calm"] {
    --theme-primary: #52B788;
    --theme-secondary: #95D5B2;
    --theme-accent: #D8F3DC;
    --bg-primary: #0F1A13;
    --bg-secondary: #1B2D1F;
}

[data-theme="cherry-blossom"] {
    --theme-primary: #FF69B4;
    --theme-secondary: #FFB6C1;
    --theme-accent: #FFC0CB;
    --bg-primary: #1A0A14;
    --bg-secondary: #2B1522;
}

[data-theme="midnight-galaxy"] {
    --theme-primary: #8B5CF6;
    --theme-secondary: #A78BFA;
    --theme-accent: #C4B5FD;
    --bg-primary: #050510;
    --bg-secondary: #0A0A1F;
}

[data-theme="toxic-waste"] {
    --theme-primary: #39FF14;
    --theme-secondary: #00FF00;
    --theme-accent: #7FFF00;
    --bg-primary: #0A1A00;
    --bg-secondary: #142B05;
}

[data-theme="blood-moon"] {
    --theme-primary: #DC143C;
    --theme-secondary: #8B0000;
    --theme-accent: #FF1493;
    --bg-primary: #1A0505;
    --bg-secondary: #2B0A0A;
}

[data-theme="electric-storm"] {
    --theme-primary: #00D9FF;
    --theme-secondary: #FFFF00;
    --theme-accent: #9D00FF;
    --bg-primary: #05050F;
    --bg-secondary: #0A0A1A;
}

[data-theme="rose-gold"] {
    --theme-primary: #F7B5CA;
    --theme-secondary: #FFD700;
    --theme-accent: #FFC0CB;
    --bg-primary: #1A1214;
    --bg-secondary: #2B1D22;
}

[data-theme="deep-ocean"] {
    --theme-primary: #006994;
    --theme-secondary: #3B82F6;
    --theme-accent: #06B6D4;
    --bg-primary: #030C14;
    --bg-secondary: #051621;
}

[data-theme="cannabis-green"] {
    --theme-primary: #228B22;
    --theme-secondary: #32CD32;
    --theme-accent: #90EE90;
    --bg-primary: #0A1A0A;
    --bg-secondary: #0F2B0F;
}

/* === TYPOGRAPHY === */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-base);
    font-weight: var(--font-normal);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: var(--font-bold);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

h1 { font-size: var(--font-5xl); }
h2 { font-size: var(--font-4xl); }
h3 { font-size: var(--font-3xl); }
h4 { font-size: var(--font-2xl); }
h5 { font-size: var(--font-xl); }
h6 { font-size: var(--font-lg); }

.font-mono {
    font-family: 'Orbitron', 'Monaco', 'Courier New', monospace;
}

.font-display {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
}

/* === UTILITIES === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--theme-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

.bg-gradient { background: var(--theme-gradient); }
.bg-card { background: var(--bg-card); }

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

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

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--theme-primary-rgb, 0, 245, 255), 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(var(--theme-primary-rgb, 0, 245, 255), 0.8);
    }
}

.animate-fadeIn { animation: fadeIn var(--transition-base) ease-out; }
.animate-fadeInUp { animation: fadeInUp var(--transition-slow) ease-out; }
.animate-fadeInScale { animation: fadeInScale var(--transition-slow) ease-out; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }

/* === RESPONSIVE UTILITIES === */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
    .hide-mobile { display: none; }
    .show-mobile { display: block; }

    /* Adjust font sizes for mobile */
    :root {
        --font-5xl: 2.5rem;
        --font-4xl: 2rem;
        --font-3xl: 1.5rem;
    }
}

/* === ACCESSIBILITY === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus states for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === PRINT STYLES === */
@media print {
    body {
        background: white;
        color: black;
    }

    .no-print {
        display: none !important;
    }
}

/* === THEME: STONER PARADISE (Ultimate - 500 sessions) === */
[data-theme="stoner-paradise"] {
    --bg-primary: #0a1f0a;
    --bg-secondary: #142814;
    --bg-tertiary: #1e3a1e;
    --theme-primary: #00ff41;
    --theme-secondary: #32CD32;
    --theme-accent: #7FFF00;
    --theme-gradient: linear-gradient(135deg, #00ff41, #7FFF00, #32CD32);
    --theme-primary-rgb: 0, 255, 65;
    --text-primary: #e8ffe8;
    --text-secondary: #b8ffb8;
    --text-muted: #88cc88;
    --success: #00ff41;
}

[data-theme="stoner-paradise"] .btn-primary {
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
    animation: glow 2s ease infinite;
}

[data-theme="stoner-paradise"] .card {
    background: linear-gradient(145deg, rgba(0, 255, 65, 0.05), rgba(50, 205, 50, 0.03));
    border: 1px solid rgba(0, 255, 65, 0.2);
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.1);
}

/* === THEME: CHEECH & CHONG (Legendary - 1000 sessions) === */
[data-theme="cheech-and-chong"] {
    --bg-primary: #1a0f00;
    --bg-secondary: #2a1a00;
    --bg-tertiary: #3a2500;
    --theme-primary: #FF8C00;
    --theme-secondary: #FFD700;
    --theme-accent: #FFA500;
    --theme-gradient: linear-gradient(135deg, #FF8C00, #FFD700, #FFA500);
    --theme-primary-rgb: 255, 140, 0;
    --text-primary: #fff8dc;
    --text-secondary: #ffeaa7;
    --text-muted: #d4a574;
    --success: #FFD700;
}

[data-theme="cheech-and-chong"] .btn-primary {
    box-shadow: 0 8px 16px rgba(255, 140, 0, 0.4);
    border: 2px solid #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 800;
}

[data-theme="cheech-and-chong"] .card {
    background: linear-gradient(145deg, rgba(255, 140, 0, 0.1), rgba(255, 215, 0, 0.05));
    border: 2px solid rgba(255, 140, 0, 0.3);
}

[data-theme="cheech-and-chong"] .app-logo {
    text-shadow: 3px 3px 0px #FF8C00, 6px 6px 0px #FFA500;
}