/* ==========================================================================
   Cogito Markets - Theme & Styles
   ========================================================================== */

/* ==========================================================================
   Theme CSS Variables
   Based on cogito.css color palette
   RGB format for Tailwind opacity modifier compatibility
   ========================================================================== */

:root[data-theme="light"] {
    /* Text colors - RGB format for Tailwind */
    --text-50: 237 242 248;
    --text-100: 218 228 241;
    --text-200: 182 201 226;
    --text-300: 145 174 212;
    --text-400: 108 147 198;
    --text-500: 71 120 184;
    --text-600: 57 96 147;
    --text-700: 43 72 110;
    --text-800: 29 48 73;
    --text-900: 14 24 37;
    --text-950: 7 12 18;

    /* Background colors */
    --background-50: 237 240 247;
    --background-100: 219 224 240;
    --background-200: 184 194 224;
    --background-300: 148 163 209;
    --background-400: 112 133 194;
    --background-500: 77 102 179;

    /* Primary colors */
    --primary-50: 233 240 251;
    --primary-100: 212 226 247;
    --primary-200: 169 197 239;
    --primary-300: 126 168 231;
    --primary-400: 83 139 223;
    --primary-500: 40 110 215;
    --primary-600: 32 88 172;
    --primary-700: 24 66 129;
    --primary-800: 16 44 86;
    --primary-900: 8 22 43;
    --primary-950: 4 11 22;

    /* Secondary colors */
    --secondary-50: 232 240 252;
    --secondary-100: 209 225 250;
    --secondary-200: 163 196 245;
    --secondary-300: 117 166 240;
    --secondary-400: 71 137 235;
    --secondary-500: 25 107 230;
    --secondary-600: 20 86 184;
    --secondary-700: 15 64 138;
    --secondary-800: 10 43 92;
    --secondary-900: 5 21 46;
    --secondary-950: 3 11 23;

    /* Accent colors */
    --accent-50: 234 250 249;
    --accent-100: 214 245 243;
    --accent-200: 172 236 231;
    --accent-300: 131 226 220;
    --accent-400: 90 216 208;
    --accent-500: 48 207 196;
    --accent-600: 39 165 157;
    --accent-700: 29 124 118;
    --accent-800: 19 83 78;
    --accent-900: 10 41 39;
    --accent-950: 5 21 20;

    /* Glass effect for light theme */
    --glass-bg: rgba(237, 240, 247, 0.85);
    --glass-border: rgba(48, 207, 196, 0.15);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    --scrollbar-track: #dbe0f0;
}

:root[data-theme="dark"] {
    /* Text colors - RGB format for Tailwind */
    --text-50: 7 12 18;
    --text-100: 14 24 37;
    --text-200: 29 48 73;
    --text-300: 43 72 110;
    --text-400: 57 96 147;
    --text-500: 71 120 184;
    --text-600: 108 147 198;
    --text-700: 145 174 212;
    --text-800: 182 201 226;
    --text-900: 218 228 241;
    --text-950: 237 242 248;

    /* Background colors */
    --background-50: 8 10 18;
    --background-100: 15 20 36;
    --background-200: 31 41 71;
    --background-300: 46 61 107;
    --background-400: 61 82 143;
    --background-500: 77 102 179;

    /* Primary colors */
    --primary-50: 4 11 22;
    --primary-100: 8 22 43;
    --primary-200: 16 44 86;
    --primary-300: 24 66 129;
    --primary-400: 32 88 172;
    --primary-500: 40 110 215;
    --primary-600: 83 139 223;
    --primary-700: 126 168 231;
    --primary-800: 169 197 239;
    --primary-900: 212 226 247;
    --primary-950: 233 240 251;

    /* Secondary colors */
    --secondary-50: 3 11 23;
    --secondary-100: 5 21 46;
    --secondary-200: 10 43 92;
    --secondary-300: 15 64 138;
    --secondary-400: 20 86 184;
    --secondary-500: 25 107 230;
    --secondary-600: 71 137 235;
    --secondary-700: 117 166 240;
    --secondary-800: 163 196 245;
    --secondary-900: 209 225 250;
    --secondary-950: 232 240 252;

    /* Accent colors */
    --accent-50: 5 21 20;
    --accent-100: 10 41 39;
    --accent-200: 19 83 78;
    --accent-300: 29 124 118;
    --accent-400: 39 165 157;
    --accent-500: 48 207 196;
    --accent-600: 90 216 208;
    --accent-700: 131 226 220;
    --accent-800: 172 236 231;
    --accent-900: 214 245 243;
    --accent-950: 234 250 249;

    /* Glass effect for dark theme */
    --glass-bg: rgba(15, 20, 36, 0.8);
    --glass-border: rgba(48, 207, 196, 0.1);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    --scrollbar-track: #0f1424;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

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

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

/* ==========================================================================
   Component Styles
   ========================================================================== */

/* Primary CTA Button with shimmer effect */
.btn-shimmer {
    background: linear-gradient(
        110deg,
        #30cfc4 0%,
        #30cfc4 40%,
        #5ad8d0 50%,
        #30cfc4 60%,
        #30cfc4 100%
    );
    background-size: 200% 100%;
    color: #080a12; /* Always dark text for contrast on teal */
}

.btn-shimmer:hover {
    animation: shimmer 1.5s linear infinite;
}

/* Grid background pattern - theme aware */
:root[data-theme="dark"] {
    --grid-line-color: rgba(48, 207, 196, 0.05);
}

:root[data-theme="light"] {
    --grid-line-color: rgba(48, 207, 196, 0.15);
}

.grid-bg {
    background-image:
        linear-gradient(var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Gradient mesh for hero sections */
.gradient-mesh-centered {
    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(40, 110, 215, 0.12) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 50% 60%,
            rgba(48, 207, 196, 0.08) 0%,
            transparent 50%
        );
}

/* Live indicator dot */
.live-dot {
    position: relative;
}

.live-dot::before,
.live-dot::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

.live-dot::before {
    animation: pulse 2s ease-in-out infinite;
}

.live-dot::after {
    box-shadow: 0 0 10px #22c55e;
}

/* Card hover effect */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow);
}

/* Scroll reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
}

.reveal.active {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Glass morphism effect */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--accent-500);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-600);
}