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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 215 35% 12%;

    --card: 0 0% 100%;
    --card-foreground: 215 35% 12%;

    --primary: 215 50% 18%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 20% 96%;
    --secondary-foreground: 215 35% 18%;

    --muted: 210 20% 96%;
    --muted-foreground: 215 16% 42%;

    --accent: 210 90% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 20% 90%;
    --input: 215 20% 90%;
    --ring: 215 50% 25%;

    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  }

  ::selection {
    background-color: hsl(215 50% 18%);
    color: white;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply font-display tracking-tight;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }
}

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

  .section-padding {
    @apply py-20 md:py-28 lg:py-32;
  }

  .text-balance {
    text-wrap: balance;
  }

  .eyebrow {
    @apply inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-steel-600;
  }

  .eyebrow::before {
    content: "";
    @apply h-px w-8 bg-steel-300;
  }

  .glass-card {
    @apply rounded-2xl border border-steel-100 bg-white shadow-[0_1px_0_0_rgba(15,26,42,0.04),0_24px_60px_-32px_rgba(15,26,42,0.18)];
  }

  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-steel-800 focus-visible:ring-offset-2 focus-visible:ring-offset-white;
  }
}

@layer utilities {
  .bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .mask-fade-bottom {
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }
}

/* Smooth font loading */
.font-display-loaded h1,
.font-display-loaded h2,
.font-display-loaded h3 {
  font-display: swap;
}