/* CSS linter directives - ignore Tailwind at-rules */
/* stylelint-disable at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* stylelint-enable at-rule-no-unknown */
/* aspect-ratio utilities are disabled in tailwind-preset.js
   (corePlugins.aspectRatio: false) because react-native-css-interop
   crashes on "aspect-ratio: auto" during Metro bundling. */

/* Geist fonts loaded via expo-font in the consumer's root _layout.tsx */

@layer base {
  :root {
    --background: 255 255 255;
    --foreground: 0 0 0;

    --card: 255 255 255;
    --card-foreground: 0 0 0;

    --popover: 255 255 255;
    --popover-foreground: 0 0 0;

    --primary: 0 0 0;
    --primary-foreground: 255 255 255;

    --secondary: 245 245 245;
    --secondary-foreground: 0 0 0;

    --muted: 245 245 245;
    --muted-foreground: 115 115 115;

    --accent: 245 245 245;
    --accent-foreground: 0 0 0;

    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;

    --border: 229 229 229;
    --input: 229 229 229;
    --ring: 0 0 0;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0 0;
    --foreground: 255 255 255;

    --card: 0 0 0;
    --card-foreground: 255 255 255;

    --popover: 0 0 0;
    --popover-foreground: 255 255 255;

    --primary: 255 255 255;
    --primary-foreground: 0 0 0;

    --secondary: 38 38 38;
    --secondary-foreground: 255 255 255;

    --muted: 38 38 38;
    --muted-foreground: 163 163 163;

    --accent: 38 38 38;
    --accent-foreground: 255 255 255;

    --destructive: 127 29 29;
    --destructive-foreground: 255 255 255;

    --border: 38 38 38;
    --input: 38 38 38;
    --ring: 255 255 255;
  }

  body {
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
  }
}

@layer base {
  * {
    font-family:
      "Geist-Regular",
      system-ui,
      -apple-system,
      sans-serif;
  }

  .font-mono {
    font-family:
      "GeistMono-Regular", "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono",
      "Droid Sans Mono", "Courier New", monospace;
  }

  body {
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  /* Remove default browser focus outline — apps style focus themselves. */
  input:focus,
  textarea:focus,
  button:focus,
  [role="button"]:focus,
  [tabindex]:focus {
    outline: none;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fade-in 0.3s ease-in-out;
  }

  .animate-slide-up {
    animation: slide-up 0.3s ease-out;
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-countdown {
    animation: countdown 1s linear infinite;
  }

  .active\:scale-98:active {
    transform: scale(0.98);
  }

  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes countdown {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@layer components {
  .terminal-cursor::after {
    content: "_";
    animation: blink 1s infinite;
    font-weight: 700;
  }

  @keyframes blink {
    0%,
    50% {
      opacity: 1;
    }
    51%,
    100% {
      opacity: 0;
    }
  }
}

@layer components {
  .progress-ring {
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 1s linear;
  }
}

@layer components {
  .skeleton {
    background: linear-gradient(90deg, #f5f5f5 0%, rgba(115, 115, 115, 0.1) 50%, #f5f5f5 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
  }

  .dark .skeleton {
    background: linear-gradient(90deg, #262626 0%, rgba(163, 163, 163, 0.1) 50%, #262626 100%);
  }

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

@layer utilities {
  @media (hover: hover) {
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #ffffff;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(115, 115, 115, 0.3);
      border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(115, 115, 115, 0.5);
    }

    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #000000;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(163, 163, 163, 0.3);
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(163, 163, 163, 0.5);
    }
  }
}