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

@layer base {
  :root {
    --background: #1c1c1e;
    /* systemBackground */
    --surface: #2c2c2e;
    /* secondarySystemBackground */
    --primary: #ea580c;
    /* orange-600 */
    --secondary: #f97316;
    /* orange-500 */
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --border: #38383a;
    /* separator */
    --ring: #f97316;
  }
}

body {
  @apply bg-[#1c1c1e] text-[#fafafa] antialiased selection:bg-orange-500/30;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Global Input Text Fix */
input,
textarea,
select {
  @apply bg-zinc-950 text-white border-zinc-800 focus:ring-1 focus:ring-orange-600 outline-none transition-all;
}

input::placeholder,
textarea::placeholder {
  @apply text-zinc-600;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-inter), system-ui, sans-serif;
  letter-spacing: -0.02em;
}

@layer utilities {
  .glass {
    @apply backdrop-blur-md bg-zinc-900/50 border border-zinc-800/50;
  }

  .glass-dark {
    @apply backdrop-blur-md bg-zinc-950/80 border border-zinc-900/50;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}