@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap");
@import "tailwindcss";

@theme {
  --font-sans: "Geist", ui-sans-serif, sans-serif;
}

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  background: #fafaf9;
  color: #1c1917;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #1c1917;
  color: white;
}

@layer base {
  a,
  button {
    @apply outline-none;
  }

  img {
    @apply select-none;
  }
}

@layer components {
  /* Layout */
  .page-frame {
    @apply relative mx-auto w-full max-w-[1440px] px-4 sm:px-6 lg:px-10;
  }

  /* Buttons — base styles inline in each variant (Tailwind v4 doesn't allow @apply on custom classes) */
  .btn-dark {
    @apply inline-flex items-center justify-center gap-2 rounded-none bg-stone-900 px-5 py-2.5 text-[13px] font-medium text-white transition-colors duration-150 hover:bg-stone-700;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 rounded-none border border-stone-300 bg-transparent px-5 py-2.5 text-[13px] font-medium text-stone-700 transition-colors duration-150 hover:border-stone-400 hover:bg-stone-50;
  }

  /* Tiny uppercase label */
  .label {
    @apply text-[10px] font-semibold uppercase tracking-[0.3em] text-stone-400;
  }

  /* Display headline */
  .display {
    @apply text-[clamp(2.5rem,6vw,5.5rem)] font-semibold leading-[1.0] tracking-[-0.045em] text-stone-900;
  }

  /* Source attribution pill */
  .source-pill {
    @apply inline-flex items-center gap-1.5 border px-2.5 py-1 text-[11px] font-medium;
  }
}
