@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark-tech design tokens (single dark theme). HSL triplets so Tailwind
   color utilities and shadcn-style primitives resolve via hsl(var(--x)). */
:root,
.dark {
    --background: 222 32% 6%;
    --foreground: 210 22% 92%;

    --surface: 222 28% 8.5%;
    --card: 222 26% 9.5%;
    --card-foreground: 210 22% 92%;

    --muted: 222 20% 14%;
    --muted-foreground: 215 16% 60%;

    --accent: 222 24% 13%;
    --accent-foreground: 210 22% 92%;

    --border: 220 18% 18%;
    --input: 220 18% 16%;
    --ring: 186 92% 56%;

    /* cyan primary, violet secondary — the neon accents */
    --primary: 186 92% 56%;
    --primary-foreground: 222 47% 6%;
    --secondary: 258 90% 68%;
    --secondary-foreground: 0 0% 100%;

    --destructive: 0 72% 56%;
    --destructive-foreground: 0 0% 100%;

    --radius: 0.5rem;
}

* {
    border-color: hsl(var(--border));
}

html,
body,
#root {
    height: 100%;
}

body {
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient grid + glow backdrop for the app shell */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60rem 60rem at 110% -10%, hsl(258 90% 68% / 0.10), transparent 60%),
        radial-gradient(50rem 50rem at -10% 110%, hsl(186 92% 56% / 0.08), transparent 60%);
}

::selection {
    background: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
}

/* Slim techy scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}

@layer utilities {
    .neon-text {
        color: hsl(var(--primary));
        text-shadow: 0 0 12px hsl(var(--primary) / 0.55);
    }
    .neon-text-violet {
        color: hsl(var(--secondary));
        text-shadow: 0 0 12px hsl(var(--secondary) / 0.55);
    }
    .glass {
        background: hsl(var(--surface) / 0.7);
        backdrop-filter: blur(10px);
    }
}
