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

@layer base {
    :root {
        /* Slightly cool off-white so translucent cards read cleanly */
        --background: 200 30% 98%;
        --foreground: 210 30% 12%;

        --card: 0 0% 100%;
        --card-foreground: 210 30% 12%;

        --popover: 0 0% 100%;
        --popover-foreground: 210 30% 12%;

        /* Brand accent (teal) — used everywhere except during a game, where the
           per-game colour overrides --primary. */
        --primary: 174 72% 30%;
        --primary-foreground: 0 0% 100%;

        --secondary: 200 24% 94%;
        --secondary-foreground: 210 30% 20%;

        --muted: 200 24% 94%;
        --muted-foreground: 210 12% 42%;

        --accent: 174 60% 94%;
        --accent-foreground: 174 72% 24%;

        --destructive: 0 78% 58%;
        --destructive-foreground: 0 0% 100%;

        --border: 210 20% 90%;
        --input: 210 20% 90%;
        --ring: 174 72% 30%;

        --radius: 1rem;
    }

    .dark {
        /* Deep cosmic navy */
        --background: 222 40% 8%;
        --foreground: 210 30% 96%;

        /* Elevated surface, distinctly lighter than the background */
        --card: 222 32% 13%;
        --card-foreground: 210 30% 96%;

        --popover: 222 32% 13%;
        --popover-foreground: 210 30% 96%;

        --primary: 172 62% 44%;
        --primary-foreground: 200 40% 8%;

        --secondary: 220 24% 20%;
        --secondary-foreground: 210 30% 96%;

        --muted: 220 24% 18%;
        --muted-foreground: 214 15% 65%;

        --accent: 172 40% 22%;
        --accent-foreground: 172 62% 70%;

        --destructive: 0 62% 45%;
        --destructive-foreground: 0 0% 100%;

        --border: 220 22% 22%;
        --input: 220 22% 24%;
        --ring: 172 62% 44%;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground antialiased selection:bg-primary/20 selection:text-primary;
        touch-action: manipulation;
    }
}

/* Utilities for PWA and Mobile */
.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
