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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@layer base {
    :root {
        --background: 40 33% 97%;
        --foreground: 60 5% 11%;
        --card: 0 0% 100%;
        --card-foreground: 60 5% 11%;
        --popover: 0 0% 100%;
        --popover-foreground: 60 5% 11%;
        --primary: 142 33% 18%;
        --primary-foreground: 40 33% 97%;
        --secondary: 40 20% 92%;
        --secondary-foreground: 60 5% 11%;
        --muted: 40 20% 94%;
        --muted-foreground: 120 5% 33%;
        --accent: 16 60% 50%;
        --accent-foreground: 40 33% 97%;
        --destructive: 0 72% 44%;
        --destructive-foreground: 40 33% 97%;
        --border: 36 20% 88%;
        --input: 36 20% 88%;
        --ring: 142 33% 18%;
        --radius: 0.75rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        @apply bg-background text-foreground;
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    h1, h2, h3, h4, .font-serif {
        font-family: 'Cormorant Garamond', Georgia, serif;
        letter-spacing: -0.01em;
    }
    .font-mono {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }
}

.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: hsl(var(--accent));
}

.recipe-card-image {
    transition: transform 0.6s ease;
}
.recipe-card:hover .recipe-card-image {
    transform: scale(1.05);
}

.prose-recipe p {
    @apply text-[15px] leading-relaxed text-neutral-700;
    margin-bottom: 1rem;
}

@media print {
    .no-print {
        display: none !important;
    }
    body {
        background: white;
    }
}

[data-debug-wrapper="true"] {
    display: contents !important;
}