@import "tailwindcss";

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }
}

/* ── Custom theme tokens ─────────────────────────────────────────── */
@theme {
    --color-brand-50: #fef2f3;
    --color-brand-100: #fee2e5;
    --color-brand-200: #fecacd;
    --color-brand-300: #fda4ab;
    --color-brand-400: #fb6e7c;
    --color-brand-500: #f14152;
    --color-brand-600: #ce2237;
    --color-brand-700: #ac1526;
    --color-brand-800: #8f1523;
    --color-brand-900: #7a1723;
    --color-brand-950: #43070f;

    --color-accent-400: #f79009;
    --color-accent-500: #f59e0b;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ── Scroll-triggered reveal animation ───────────────────────────── */
@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
}

.reveal.revealed {
    animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Prose styling for CMS richtext blocks ───────────────────────── */
.prose {
    color: var(--color-gray-900, #111827);
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.prose p {
    margin-bottom: 1rem;
    line-height: 1.7;
}
.prose ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.prose ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.prose a {
    color: var(--color-brand-600);
    text-decoration: underline;
}

/* ── Smooth page transitions ─────────────────────────────────────── */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.page-enter {
    animation: fade-in 0.35s ease-out;
}

/* ── Gradient text helper ────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, var(--color-brand-600), var(--color-brand-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Feature cards (rendered via CMS richtext HTML) ──────────────── */
.feature-card {
    background: white;
    border: 1px solid var(--color-gray-100, #f3f4f6);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--color-brand-200);
}

.feature-card .feature-icon {
    margin-bottom: 1rem;
    color: var(--color-brand-600);
    line-height: 1;
}

.feature-card .feature-icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.feature-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gray-900, #111827);
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 0.938rem;
    color: var(--color-gray-500, #6b7280);
    line-height: 1.65;
}

/* ── Prose code inline styling ───────────────────────────────────── */
.prose code {
    background: var(--color-brand-50, #f0f5ff);
    color: var(--color-brand-700, #3538cd);
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    font-size: 0.875em;
    font-weight: 500;
}

.prose strong {
    color: var(--color-gray-900, #111827);
}

.prose li {
    margin-bottom: 0.35rem;
}

/* ── Smooth scroll for anchor links ──────────────────────────────── */
html {
    scroll-behavior: smooth;
}
