@import 'tailwindcss';

@layer base {
  :root {
    /* Light mode defaults (slate / cool-gray) */
    --background: 210 20% 98%;
    --foreground: 224 71% 10%;
    --card: 0 0% 100%;
    --card-foreground: 224 71% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 10%;
    --primary: 160, 84%, 39%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 93%;
    --secondary-foreground: 224 71% 20%;
    --muted: 210 20% 93%;
    --muted-foreground: 215 20% 38%;
    --accent: 210 20% 88%;
    --accent-foreground: 224 71% 15%;
    --destructive: 0 84% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 82%;
    --input: 214 32% 82%;
    --ring: 239 84% 60%;
    --radius: 0.5rem;
    --terminal-bg: 210 25% 97%;
    --terminal-fg: 224 71% 10%;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --background: 224 71% 4%;
      --foreground: 213 31% 91%;
      --card: 224 71% 6%;
      --card-foreground: 213 31% 91%;
      --popover: 224 71% 6%;
      --popover-foreground: 213 31% 91%;
      --primary: 160, 84%, 39%;
      --primary-foreground: 0 0% 100%;
      --secondary: 215 28% 17%;
      --secondary-foreground: 213 31% 91%;
      --muted: 215 28% 17%;
      --muted-foreground: 218 11% 65%;
      --accent: 215 28% 17%;
      --accent-foreground: 213 31% 91%;
      --destructive: 0 63% 31%;
      --destructive-foreground: 213 31% 91%;
      --border: 216 34% 17%;
      --input: 216 34% 17%;
      --ring: 239 84% 67%;
      --terminal-bg: 224 71% 4%;
      --terminal-fg: 213 31% 91%;
    }
  }

  :root[data-theme='dark'] {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --card: 224 71% 6%;
    --card-foreground: 213 31% 91%;
    --popover: 224 71% 6%;
    --popover-foreground: 213 31% 91%;
    --primary: 160, 84%, 39%;
    --primary-foreground: 0 0% 100%;
    --secondary: 215 28% 17%;
    --secondary-foreground: 213 31% 91%;
    --muted: 215 28% 17%;
    --muted-foreground: 218 11% 65%;
    --accent: 215 28% 17%;
    --accent-foreground: 213 31% 91%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 213 31% 91%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --ring: 239 84% 67%;
    --terminal-bg: 224 71% 4%;
    --terminal-fg: 213 31% 91%;
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    height: 100%;
    background-color: hsl(var(--background));
    color-scheme: light dark;
    overscroll-behavior: none;
  }

  body {
    min-height: 100%;
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family:
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      'Noto Sans',
      sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    position: relative;
  }

  #root {
    min-height: 100vh;
    background-color: hsl(var(--background));
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: hsl(var(--background));
    z-index: -1;
    pointer-events: none;
  }

  @supports (height: 100dvh) {
    #root {
      min-height: 100dvh;
    }
  }

  @media (display-mode: standalone) {
    html,
    body,
    #root {
      background-color: hsl(var(--background)) !important;
    }
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: hsl(214 32% 72%);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: hsl(215 16% 52%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) ::-webkit-scrollbar-thumb {
      background: hsl(216 34% 25%);
    }
    :root:not([data-theme='light']) ::-webkit-scrollbar-thumb:hover {
      background: hsl(216 34% 35%);
    }
  }

  :root[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: hsl(216 34% 25%);
  }
  :root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: hsl(216 34% 35%);
  }
}

@layer utilities {
  .animate-shimmer {
    animation: shimmer 1.5s infinite;
    background: linear-gradient(
      90deg,
      hsl(var(--secondary)) 25%,
      hsl(var(--accent)) 50%,
      hsl(var(--secondary)) 75%
    );
    background-size: 200% 100%;
  }
  .animate-row-slide-in {
    animation: row-slide-in 0.25s ease-out forwards;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes row-slide-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
