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

@layer base {
  :root {
    --bg: #ffffff;
    --surface: #fff8f5;
    --primary: #ff5c00;
    --primary-dark: #cc4900;
    --primary-tint: #fff1e8;
    --text-1: #171717;
    --text-2: #626262;
    --text-3: #a0a0a0;
    --border: #f0f0f0;
    --success: #22c55e;
    --gold: #ffc107;
    --shadow-pop: 0 18px 60px rgba(0, 0, 0, 0.12);
  }

  * {
    @apply box-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply m-0 bg-white text-[15px] leading-6 text-[color:var(--text-1)];
    font-family: var(--font-dm-sans), system-ui, sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-poppins), sans-serif;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }
}

@layer components {
  .site-shell {
    @apply min-h-screen bg-white;
  }

  .site-container {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-6 lg:px-8;
  }

  .hero-overlay {
    background:
      linear-gradient(110deg, rgba(16, 10, 8, 0.82) 0%, rgba(16, 10, 8, 0.58) 42%, rgba(16, 10, 8, 0.18) 72%, rgba(16, 10, 8, 0.06) 100%);
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-medium transition duration-200;
    font-family: var(--font-poppins), sans-serif;
  }

  .btn-primary {
    @apply bg-[color:var(--primary)] text-white hover:scale-[1.02] hover:bg-[color:var(--primary-dark)];
  }

  .btn-outline {
    @apply border border-white/30 bg-white/10 text-white backdrop-blur hover:bg-white/20;
  }

  .chip {
    @apply inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
  }

  .surface-card {
    @apply rounded-[28px] border border-white/10 bg-white/95 text-[color:var(--text-1)] shadow-[var(--shadow-pop)] backdrop-blur;
  }

  .section-title {
    @apply text-3xl font-bold tracking-[-0.03em] sm:text-4xl;
  }

  .section-copy {
    @apply mt-3 max-w-2xl text-base text-[color:var(--text-2)] sm:text-lg;
  }
}

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