@import "tailwindcss";

/* ── WorkWeb design tokens (Tailwind v4 @theme) ──────────────────────────────
   Brand palette derived from the WorkWeb logo: deep navy + forest/emerald green.
   These generate utilities like bg-navy, text-green, border-green-bright, etc. */
@theme {
  --color-navy: #0b1f3a;
  --color-navy-light: #16335c;
  --color-navy-50: #eef2f8;
  --color-green: #1f7a4d;
  --color-green-bright: #2aa45f;
  --color-green-dark: #185f3c; /* button bg — white text passes WCAG AA (≥4.5:1) */
  --color-green-50: #eaf6ef;
  --color-gold: #e9b949;
  --color-sand: #f6f7f9;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: var(--font-sans);
    @apply bg-white text-slate-800 antialiased;
  }
}

/* Small set of element classes. Each @apply uses utilities only (Tailwind v4). */
@layer components {
  .container-px {
    @apply mx-auto w-full max-w-6xl px-5 sm:px-8;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-green px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-green-dark;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-white px-5 py-3 text-sm font-semibold text-navy ring-1 ring-navy/15 transition-colors hover:bg-navy-50;
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-semibold text-white ring-1 ring-white/30 transition-colors hover:bg-white/10;
  }
}