frontend/src/index.css

@import "tailwindcss";

@theme {
    --color-theme-bg: var(--theme-bg);
    --color-theme-card: var(--theme-card);
    --color-theme-border: var(--theme-border);
    --color-theme-text: var(--theme-text);
    --color-theme-text-muted: var(--theme-text-muted);
    --color-theme-accent: var(--theme-accent);
}

:root {
    /* Default Dark Theme */
    --theme-bg: #0b1120;
    /* Slate 950 */
    --theme-card: #1e293b;
    /* Slate 800 */
    --theme-border: #334155;
    /* Slate 700 */
    --theme-text: #f8fafc;
    /* Slate 50 */
    --theme-text-muted: #94a3b8;
    /* Slate 400 */
    --theme-accent: #38bdf8;
    /* Sky 400 */
    --theme-grad-start: #1e293b;
    --theme-grad-end: #0b1120;

    font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: dark;
    color: var(--theme-text);
    background-color: var(--theme-bg);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Emerald Terminal (Matrix/Hacker Style) */
.theme-emerald {
    --theme-bg: #000000;
    /* Pure Black */
    --theme-card: #051a0d;
    /* Deep Forest Green */
    --theme-border: #14532d;
    /* Green 900 */
    --theme-text: #ecfccb;
    /* Lime 100 */
    --theme-text-muted: #4ade80;
    /* Green 400 (Terminal Text) */
    --theme-text-highlight: #ffffff;
    --theme-accent: #22c55e;
    /* Green 500 */
    --theme-grad-start: #020602;
    --theme-grad-end: #000000;

    color-scheme: dark;
}

/* Synthwave Theme (Cyberpunk/Neon) */
.theme-synthwave {
    --theme-bg: #0f0720;
    /* Dark Violet */
    --theme-card: #1e1035;
    /* Deep Violet */
    --theme-border: #4c1d95;
    /* Violet 900 */
    --theme-text: #fae8ff;
    /* Fuchsia 50 */
    --theme-text-muted: #a855f7;
    /* Purple 500 */
    --theme-text-highlight: #ffffff;
    --theme-accent: #e879f9;
    /* Fuchsia 400 */
    --theme-grad-start: #2e1065;
    /* Violet 950 */
    --theme-grad-end: #0f0720;

    color-scheme: dark;
}

.theme-synthwave .glass {
    background: color-mix(in srgb, var(--theme-card), transparent 20%);
    border: 1px solid var(--theme-border);
    box-shadow: 0 0 15px -3px rgba(192, 132, 252, 0.15);
    /* Purple glow */
}

body {
    margin: 0;
    display: flex;
    min-width: 320px;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, var(--theme-grad-start) 0%, var(--theme-grad-end) 100%);
    color: var(--theme-text);
}

#app {
    width: 100%;
}

@utility glass {
    background: color-mix(in srgb, var(--theme-card), transparent 30%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--theme-border), transparent 80%);
}

.theme-emerald .glass {
    background: color-mix(in srgb, var(--theme-card), transparent 20%);
    border: 1px solid var(--theme-border);
}



@utility card-hover {
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        border-color: var(--theme-accent);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted);
}