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

/* Lab-terminal theme — adapted from the Gitea STYLE.md for this React app.
   Single acid accent (#d8ff3e), dark blueprint surfaces, monospace UI.
   HSL triplets so Tailwind / shadcn-style primitives resolve hsl(var(--x)). */
:root,
.dark {
    --background: 216 24% 4%;        /* #080a0d  ink */
    --foreground: 217 35% 86%;       /* #cdd8e8  text */

    --surface: 214 29% 8%;           /* #0f141b  panel */
    --card: 214 29% 8%;
    --card-foreground: 217 38% 95%;  /* #e9f0fa  strong text */

    --muted: 214 27% 12%;            /* hovered panel */
    --muted-foreground: 216 18% 48%; /* #647691  dim / eyebrow */

    --accent: 214 27% 11%;           /* row/element hover wash base */
    --accent-foreground: 217 35% 86%;

    --border: 213 28% 16%;           /* #1d2733  lines / dividers */
    --input: 213 28% 14%;
    --ring: 72 100% 62%;             /* acid focus ring */

    /* THE accent — one acid, used for links/primary/active/focus. */
    --primary: 72 100% 62%;          /* #d8ff3e */
    --primary-foreground: 96 24% 5%; /* #0c0f08  text on acid */
    /* No second hue (STYLE: "one acid"). Secondary == acid so any
       component using it stays on-brand. */
    --secondary: 72 100% 62%;
    --secondary-foreground: 96 24% 5%;

    --destructive: 3 100% 66%;       /* #ff5a52  errors only */
    --destructive-foreground: 0 0% 100%;

    --radius: 0.75rem;
}

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

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

html {
    background-color: hsl(var(--background));
    /* Slightly larger base so all rem-based UI text scales up a bit. */
    font-size: 17px;
}

body {
    margin: 0;
    background-color: transparent;
    color: hsl(var(--foreground));
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Site-wide blueprint grid backdrop (STYLE §11.2): fixed, behind content,
   48px #1d2733 lines at low opacity, radial-masked, plus one acid sheen. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: hsl(var(--background));
    background-image:
        radial-gradient(1000px 560px at 78% -8%, hsl(72 100% 62% / 0.10), transparent 60%),
        linear-gradient(hsl(213 28% 16% / 0.16) 1px, transparent 1px),
        linear-gradient(90deg, hsl(213 28% 16% / 0.16) 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 55%, transparent 100%);
}

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

* {
    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 {
    /* Display lockup font — always lowercase per STYLE §3. */
    .font-display {
        font-family: "Major Mono Display", "IBM Plex Mono", monospace;
        text-transform: lowercase;
    }
    .neon-text {
        color: hsl(var(--primary));
        text-shadow: 0 0 44px hsl(var(--primary) / 0.38);
    }
    /* kept for compatibility with components that used the old violet
       accent — now the same single acid. */
    .neon-text-violet {
        color: hsl(var(--primary));
        text-shadow: 0 0 44px hsl(var(--primary) / 0.38);
    }
    .glass {
        background: hsl(214 29% 8% / 0.55);
        backdrop-filter: blur(16px) saturate(150%);
        border: 1px solid hsl(var(--primary) / 0.16);
    }
}
