/* Candy Crush Jelly Saga Inspired Theme - Maximum Juice */
:root {
    /* Candy Core Colors - Super Saturated */
    --candy-pink: #FF1493;
    --candy-pink-light: #FF69B4;
    --candy-pink-dark: #C71585;
    --candy-blue: #00D4FF;
    --candy-blue-light: #7DF9FF;
    --candy-blue-dark: #00A5CC;
    --candy-purple: #9B59FF;
    --candy-purple-light: #BF7FFF;
    --candy-purple-dark: #7B2FDF;
    --candy-green: #00FF87;
    --candy-green-light: #7FFFB4;
    --candy-green-dark: #00CC6A;
    --candy-orange: #FF6B00;
    --candy-orange-light: #FF9F4A;
    --candy-orange-dark: #CC5500;
    --candy-yellow: #FFE500;
    --candy-yellow-light: #FFF44F;
    --candy-yellow-dark: #CCBB00;
    --candy-red: #FF3366;
    --candy-red-light: #FF6B8A;
    --candy-red-dark: #CC1A4D;
    --candy-cyan: #00FFFF;
    --candy-magenta: #FF00FF;

    /* Legacy X Colors - kept for compatibility but amped up */
    --x-black: #0a0a1a;
    --x-white: #FFFFFF;
    --x-gray: #8899a6;
    --x-gray-dark: #38444d;
    --x-gray-darker: #1c2938;
    --x-blue: var(--candy-blue);
    --x-blue-hover: var(--candy-blue-dark);

    /* Verification Colors - candy style */
    --x-premium-gold: var(--candy-yellow);
    --x-premium-blue: var(--candy-blue);
    --x-premium-gray: #AAB8C2;

    /* Accent Colors - All candy bright */
    --accent-coral: var(--candy-pink);
    --accent-coral-dark: var(--candy-pink-dark);
    --highlight-yellow: var(--candy-yellow);
    --highlight-yellow-dark: var(--candy-yellow-dark);
    --success-green: var(--candy-green);
    --success-green-dark: var(--candy-green-dark);
    --premium-purple: var(--candy-purple);
    --premium-purple-dark: var(--candy-purple-dark);
    --warning-orange: var(--candy-orange);
    --error-red: var(--candy-red);
    --crit-cyan: var(--candy-cyan);
    --crit-cyan-dark: #00CCCC;
    --crit-mega: var(--candy-magenta);
    --crit-mega-dark: #CC00CC;
    --crit-ultra: var(--candy-yellow);
    --crit-ultra-glow: var(--candy-orange);

    /* Background - Deep candy space */
    --bg-primary: #0a0a1a;
    --bg-secondary: #12122a;
    --bg-tertiary: #1a1a3a;
    --bg-hover: #252550;

    /* Text Colors - Bright and readable */
    --text-primary: #FFFFFF;
    --text-secondary: #b4b4d4;
    --text-muted: #8888aa;
    --text-accent: var(--candy-blue);

    /* Borders - Glowing */
    --border-color: rgba(155, 89, 255, 0.3);
    --border-color-light: rgba(155, 89, 255, 0.5);

    /* Jelly Shadows - Soft and glowy */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow-blue: 0 0 30px rgba(0, 212, 255, 0.6);
    --shadow-glow-gold: 0 0 30px rgba(255, 229, 0, 0.6);
    --shadow-glow-green: 0 0 30px rgba(0, 255, 135, 0.6);
    --shadow-glow-pink: 0 0 30px rgba(255, 20, 147, 0.6);
    --shadow-glow-purple: 0 0 30px rgba(155, 89, 255, 0.6);

    /* Jelly effect gradients */
    --jelly-highlight: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%);
    --jelly-shine: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius - More bubbly */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, monospace;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    /* Transitions - Bouncy */
    --transition-fast: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-normal: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Layers */
    --z-base: 1;
    --z-overlay: 100;
    --z-modal: 200;
    --z-toast: 300;
    --z-particles: 50;
}

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

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(155, 89, 255, 0.4), transparent 50%),
        radial-gradient(ellipse 100% 60% at 100% 100%, rgba(255, 20, 147, 0.3), transparent 50%),
        radial-gradient(ellipse 80% 50% at 0% 80%, rgba(0, 212, 255, 0.25), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(0, 255, 135, 0.2), transparent 50%),
        radial-gradient(ellipse 50% 30% at 20% 20%, rgba(255, 229, 0, 0.15), transparent 50%),
        linear-gradient(180deg, #0f0f2a 0%, #0a0a1a 40%, #12122a 100%);
    background-attachment: fixed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection Colors */
::selection {
    background: var(--candy-pink);
    color: var(--x-white);
}

/* Scrollbar Styling - Candy style */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--candy-purple), var(--candy-pink));
    border-radius: 10px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--candy-purple-light), var(--candy-pink-light));
}

/* Focus Styles - Glowy */
:focus-visible {
    outline: 3px solid var(--candy-cyan);
    outline-offset: 2px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

/* Button Reset */
button {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}