/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 input, select, textarea {
  padding: 0.5rem;
 }

 input[type="number"] {
  padding: 0.5rem;
  padding-left: 2rem;
 }
 
 #root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

@layer base {
  :root {
    --background: 210 20% 98%;
    --foreground: 224 71% 4%;

    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 4%;

    --primary: 215 70% 27%;
    --primary-foreground: 210 20% 98%;

    --secondary: 173 61% 46%;
    --secondary-foreground: 220 17% 19%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 8% 46%;

    --accent: 25 95% 57%;
    --accent-foreground: 220 17% 19%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 20% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 224 71% 4%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 210 20% 98%;

    --card: 224 71% 4%;
    --card-foreground: 210 20% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 210 20% 98%;

    --primary: 210 20% 98%;
    --primary-foreground: 220 17% 19%;

    --secondary: 173 61% 46%;
    --secondary-foreground: 210 20% 98%;

    --muted: 215 27% 17%;
    --muted-foreground: 217.9 10.6% 64.9%;

    --accent: 25 95% 57%;
    --accent-foreground: 210 20% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;

    --border: 215 27% 17%;
    --input: 215 27% 17%;
    --ring: 216 12.2% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  .hero-pattern {
    background-color: hsl(var(--background));
    background-image: radial-gradient(rgba(var(--secondary), 0.1) 1px, transparent 0);
    background-size: 20px 20px;
  }
  
  .nav-link {
    @apply relative px-2 py-1 text-foreground hover:text-primary transition-colors duration-200;
  }
  
  .nav-link::after {
    content: '';
    @apply absolute left-0 bottom-0 w-0 h-0.5 bg-primary transition-all duration-300;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
}