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

@layer base {
  :root {
    --brand-primary: #f59e0b; /* Amber 500 */
    --brand-primary-light: #fcd34d;
    --brand-primary-dark: #b45309;
    --obsidian: #0f172a;
    --obsidian-light: #1e293b;
    --slate-950: #020617;
    color-scheme: light;
  }

  * {
    @apply border-slate-200;
    box-sizing: border-box;
  }

  html, body {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    position: relative;
  }

  body {
    @apply bg-slate-50 text-slate-900 font-sans antialiased;
    touch-action: pan-y;
    background-image: 
      radial-gradient(at 0% 0%, rgba(245, 158, 11, 0.03) 0px, transparent 50%),
      radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.03) 0px, transparent 50%);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    min-height: 100vh;
  }

  a {
    @apply text-inherit no-underline transition-colors;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-slate-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-indigo-200 rounded-full hover:bg-indigo-300;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .glass-card {
    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-xl shadow-slate-200/50;
  }

  /* Hide scrollbar but keep scroll functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .indigo-gradient {
    @apply bg-gradient-to-br from-indigo-400 via-indigo-500 to-indigo-600;
  }

  .obsidian-gradient {
    @apply bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950;
  }
}
