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

@layer base {
  :root {
    --sand: #f0eee6;
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --border: 46, 28%, 88%;
    --input: 214.3 31.8% 91.4%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;

    
    /* Sand color with shades */
    --sand-50: 45 30% 96%;
    --sand-100: 45 30% 92%;
    --sand-200: 45 30% 85%;
    --sand-300: 45 30% 75%;
    --sand-400: 45 30% 65%;
    --sand-500: 45 30% 55%;
    --sand-600: 45 30% 45%;
    --sand-700: 45 30% 35%;
    --sand-800: 45 30% 25%;
    --sand-900: 45 30% 15%;
  }

  .dark {
    --sand: #000000;
    --background: 0 0% 8%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --border: 220 13% 13%;
    --input: 216 34% 17%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;
    
    /* Sand color with shades in dark mode */
    --sand-50: 45 15% 15%;
    --sand-100: 45 15% 20%;
    --sand-200: 45 15% 30%;
    --sand-300: 45 15% 40%;
    --sand-400: 45 15% 50%;
    --sand-500: 45 15% 60%;
    --sand-600: 45 15% 70%;
    --sand-700: 45 15% 80%;
    --sand-800: 45 15% 90%;
    --sand-900: 45 15% 95%;
  }
}

@layer base {
  * {
    @apply border-border;
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10 and IE 11 */
    user-select: none;          /* Standard syntax */
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* View Transitions */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes draw {
0% {
    stroke-dashoffset: 1600;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
