/* PawClicks brand design system — organic luxury, Himalayan heritage */
@layer base {
    * {
        border-color: var(--color-border);
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        background-color: var(--color-background);
        color: var(--color-foreground);
        font-family: var(--font-sans);
        font-feature-settings: "ss01", "cv11";
        -webkit-font-smoothing: antialiased;
    }
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: var(--font-display);
        letter-spacing: -0.015em;
    }
    .font-mono-accent {
        font-family: var(--font-mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.75rem;
    }
}

@layer utilities {
    .container-narrow {
        max-width: 72rem;
        margin-inline: auto;
        padding-inline: 1.25rem;
    }
    @media (min-width: 768px) {
        .container-narrow {
            padding-inline: 2rem;
        }
    }
    .text-balance {
        text-wrap: balance;
    }
    .grain {
        background-image: radial-gradient(
            circle at 1px 1px,
            color-mix(in oklab, var(--ink) 6%, transparent) 1px,
            transparent 0
        );
        background-size: 4px 4px;
    }
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        animation: reveal 0.7s ease-out forwards;
    }
    .reveal-delay-1 {
        animation-delay: 0.08s;
    }
    .reveal-delay-2 {
        animation-delay: 0.16s;
    }
    .reveal-delay-3 {
        animation-delay: 0.24s;
    }
    @keyframes reveal {
        to {
            opacity: 1;
            transform: none;
        }
    }
    /* Logo sizing — do not use .h-10 / .w-auto here (they override Tailwind utilities). */
    .logo-mark {
        width: 200px;
        height: 80px;
    }
}

/* Fix responsive overflow */
html, body {
    overflow-x: hidden;
}