@import 'tailwindcss';

@theme {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  /* Ocean Serenity design system */
  --color-turquoise-50: #ecfeff;
  --color-turquoise-100: #cffafe;
  --color-turquoise-200: #a5f3fc;
  --color-turquoise-300: #67e8f9;
  --color-turquoise-400: #22d3ee;
  --color-turquoise-500: #0891b2;
  --color-turquoise-600: #0e7490;
  --color-ocean-500: #155e75;
  --color-ocean-700: #164e63;
  --color-ocean-900: #0d3742;
  --color-coral-400: #f97362;
  --color-coral-500: #ef5844;
  --color-sand-100: #f3e9d7;
  --color-cream: #fbfaf7;
  --color-mist: #eef7f9;
  --color-ink: #1e3a44;
  --color-muted: #5b7482;

  --shadow-soft: 0 18px 45px -18px rgb(21 94 117 / 0.25);
  --shadow-card: 0 10px 30px -16px rgb(21 94 117 / 0.22);
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-cream font-sans text-ink antialiased;
    line-height: 1.65;
  }
  h1,
  h2,
  h3,
  h4 {
    @apply font-display;
    line-height: 1.18;
  }
}

@layer components {
  .wrap {
    @apply mx-auto w-[min(1180px,92%)];
  }
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-outline {
    @apply inline-flex cursor-pointer items-center gap-2.5 rounded-full px-8 py-3.5 text-[0.95rem] font-semibold transition-all duration-300;
  }
  .btn-primary {
    @apply bg-turquoise-500 text-white shadow-[0_14px_30px_-10px_rgb(8_145_178/0.6)] hover:-translate-y-0.5 hover:bg-[#0aa2c7];
  }
  .btn-ghost {
    @apply border border-white/50 bg-white/15 text-white backdrop-blur-md hover:-translate-y-0.5 hover:bg-white/25;
  }
  .btn-outline {
    @apply border-[1.5px] border-turquoise-500 bg-transparent text-turquoise-500 hover:-translate-y-0.5 hover:bg-turquoise-500 hover:text-white;
  }
  .eyebrow {
    @apply mb-4 inline-flex items-center gap-2.5 text-[0.78rem] font-semibold tracking-[0.22em] uppercase text-turquoise-500;
  }
  .eyebrow-line::before {
    content: '';
    @apply h-0.5 w-8 rounded bg-turquoise-500;
  }
  .sec-title {
    @apply mb-3.5 text-[clamp(1.9rem,4vw,2.7rem)] font-semibold text-ocean-700;
  }
  .sec-lead {
    @apply max-w-2xl text-muted;
  }
  .glass-card {
    @apply rounded-3xl border border-white/90 bg-white/80 backdrop-blur-md;
  }
}
