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

@layer base {
  html {
    font-family: system-ui, sans-serif;
  }
  
  body {
    /* UrbanGamers Blue Palette (dark default) */
    --background: 240 10% 6%;       /* #0A0A0F */
    --foreground: 240 12% 96%;      /* #F0F0F5 */
    --card: 228 25% 12%;            /* #1E1E2E */
    --card-foreground: 240 12% 96%;
    --popover: 228 25% 12%;
    --popover-foreground: 240 12% 96%;
    --primary: 209 100% 50%;        /* #0087FF */
    --primary-foreground: 210 40% 98%;
    --secondary: 207 100% 14%;      /* #002647 */
    --secondary-foreground: 210 40% 96%;
    --muted: 228 14% 20%;           /* #2E2E47 */
    --muted-foreground: 228 10% 68%;/* #8888AC */
    --accent: 209 100% 50%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 228 16% 26%;          /* #404063 */
    --input: 228 16% 26%;
    --ring: 209 100% 50%;

    /* Optional light mode (if html:not(.dark)) */
    /*
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    */

    @apply bg-background text-foreground;
  }
}

@layer components {
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8;
  }
}

/* Scrollbar - Minimal pill (like image) */
:root {
  /* Scrollbar design tokens */
  --scrollbar-size: 8px;
  --scrollbar-thumb: #0087FF;          /* brand blue */
  --scrollbar-thumb-alt: #2E9DFF;      /* highlight blue */
  --scrollbar-thumb-hover: #5CB3FF;    /* hover */
  --scrollbar-thumb-active: #2E9DFF;   /* active */
  --scrollbar-track: rgba(0, 20, 40, 0.10); /* subtle track tint */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb-alt) 0%, var(--scrollbar-thumb) 100%);
  border-radius: 9999px;
  border: 2px solid transparent; /* creates gap for track */
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18), /* inner highlight */
    0 0 0 1px rgba(255,255,255,0.08),      /* subtle outline */
    0 4px 12px rgba(0,135,255,0.35);       /* soft glow */
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scrollbar-thumb-hover) 0%, var(--scrollbar-thumb-alt) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 1px rgba(255,255,255,0.10),
    0 6px 16px rgba(0,135,255,0.45);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--scrollbar-thumb-active) 0%, var(--scrollbar-thumb) 100%);
}
::-webkit-scrollbar-corner { background: transparent; }