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

:root {
  --bg-main: #f5f9fc;
  --bg-alt: #eef5fb;
  --text-main: #143047;
  --text-soft: #30526b;
  --line: #d8e5f0;
  --surface: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(94, 156, 197, 0.2), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(209, 126, 58, 0.14), transparent 30%),
    linear-gradient(180deg, var(--bg-main), var(--bg-alt));
  color: var(--text-main);
  font-family: "Source Sans 3", "Avenir Next", "Segoe UI", sans-serif;
  line-height: 1.45;
}

a {
  color: inherit;
}

.font-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Space Grotesk", "Trebuchet MS", "Avenir Next", sans-serif;
}

::selection {
  background: rgba(205, 114, 45, 0.24);
}

@layer components {
  .container-shell {
    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
  }

  .section-block {
    @apply py-14 md:py-20;
  }

  .eyebrow {
    @apply font-heading text-xs font-semibold uppercase tracking-[0.24em] text-copper-600;
  }

  .surface-card {
    @apply rounded-2xl border border-alpine-100 bg-white p-6 shadow-card;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center rounded-full border border-copper-600 bg-copper-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-copper-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-copper-500;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-full border border-alpine-300 bg-white px-5 py-2.5 text-sm font-semibold text-alpine-700 transition hover:border-alpine-500 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
  }

  .nav-chip {
    @apply inline-flex rounded-full border border-transparent px-3 py-1.5 transition hover:border-alpine-200 hover:bg-alpine-50 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
  }

  .table-shell {
    @apply w-full overflow-hidden rounded-2xl border border-alpine-200 bg-white;
  }

  .data-table {
    @apply w-full border-collapse text-left text-sm;
  }

  .data-table thead th {
    @apply bg-alpine-50 px-4 py-3 font-semibold text-alpine-800;
  }

  .data-table tbody td {
    @apply border-t border-alpine-100 px-4 py-3 text-alpine-700;
  }
}