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

@layer base {
  :root {
    --color-bg: #ffffff;
    --color-bg-muted: #f5f5f5;
    --color-fg: #0f0f0f;
    --color-fg-muted: #3d3d3d;
    --color-border: #d4d4d4;
    --color-accent: #000000;
    --font-sans: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Raleway", "Be Vietnam Pro", sans-serif;
    --font-display: "Science Gothic", "Raleway", sans-serif;
  }

  html, body {
    @apply bg-white text-black antialiased;
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-fg);
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-black tracking-tight;
    font-family: var(--font-heading);
    color: var(--color-fg);
  }

  h1 {
    @apply text-4xl md:text-5xl;
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-2xl;
  }

  p {
    @apply text-base leading-relaxed;
    color: var(--color-fg-muted);
  }

  a {
    @apply transition-colors duration-200;
    color: var(--color-fg);
  }

  a:hover {
    color: var(--color-accent);
  }

  strong {
    @apply font-semibold text-black;
  }

  code, pre {
    @apply font-mono text-sm;
  }

  button {
    @apply font-sans;
  }
}

@layer utilities {
  .text-display {
    @apply font-display uppercase tracking-[0.25em] text-black;
    letter-spacing: 0.25em;
  }

  .card {
    @apply bg-white border border-gray-200 rounded-xl shadow-none transition-shadow duration-200;
  }

  .card:hover {
    @apply shadow-lg;
  }

  .surface-muted {
    background-color: var(--color-bg-muted);
  }

  .border-subtle {
    border-color: var(--color-border);
  }

  .btn-flat {
    @apply px-6 py-3 rounded-full font-semibold tracking-wide uppercase;
    background-color: var(--color-accent);
    color: var(--color-bg);
  }

  .btn-flat--outline {
    @apply px-6 py-3 rounded-full font-semibold tracking-wide uppercase border border-black text-black;
    background-color: transparent;
  }

  .btn-flat--outline:hover {
    background-color: var(--color-fg);
    color: var(--color-bg);
  }

  .muted-link {
    @apply text-sm text-gray-500;
  }

  .muted-link:hover {
    @apply text-black;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-black text-white hover:bg-gray-900;
  }

  .btn-secondary {
    @apply bg-white text-black border border-black hover:bg-black hover:text-white;
  }

  .btn-outline {
    @apply border border-gray-400 hover:bg-gray-100;
  }

  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-black;
  }
}