@layer base {
    :root {
        /* ── Brand color ─────────────────────────────────
       Single source of truth. Change --color-accent and
       hover, focus ring, and tint all follow automatically. */
        --color-accent: hsl(95 32% 26%);
        /* moss / olive green */
        --color-accent-hover: color-mix(in oklch, var(--color-accent), black 25%);
        --color-accent-light: color-mix(in oklch, var(--color-accent), white 88%);

        /* ── Colors ──────────────────────────────────────── */
        --color-bg: hsl(60 9% 98%);
        --color-white: hsl(0 0% 100%);
        --color-text: hsl(0 0% 10%);
        --color-text-muted: hsl(0 0% 35%);
        --color-text-on-dark: hsl(60 9% 96%);
        --color-border: hsl(60 5% 88%);
        --color-img-bg: hsl(60 5% 95%);
        --color-overlay: rgb(0 0 0 / 0.4);
        --color-sale: hsl(0 72% 45%);
        --color-sage: hsl(88 14% 92%);
        --color-cream: hsl(40 33% 94%);

        /* ── Third-party brand colors ────────────────────
       Use only for that brand's logo/badge context,
       never as a general accent next to --color-accent. */
        --color-brand-freet: #92be00;

        /* ── Section washes & gradients ──────────────────
       Backgrounds for alternating page sections.
       Use sparingly: base → sage → base → deep → base. */
        --wash-sage: linear-gradient(170deg, var(--color-sage), var(--color-bg) 70%);
        --wash-deep: linear-gradient(165deg,
                color-mix(in oklch, var(--color-accent), black 15%),
                var(--color-accent) 60%);
        --glow-hero: radial-gradient(ellipse 65% 55% at 50% 42%,
                color-mix(in oklch, var(--color-accent), white 80%) 0%,
                transparent 70%);

        /* ── Focus ───────────────────────────────────────── */
        --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-accent), transparent 40%);

        /* ── Typography ─────────────────────────────────── */
        /* Self-hosted Golos Text (cyrillic + latin subsets).
       Falls back cleanly to system-ui until fonts load. */
        --ff-base: "Golos Text", system-ui, -apple-system, sans-serif;

        /* Fluid type scale — grows between mobile and desktop */
        --fs-2xs: 0.625rem;
        --fs-xs: 0.72rem;
        --fs-sm: 0.875rem;
        --fs-base: 1rem;
        --fs-md: 1.1rem;
        --fs-lg: clamp(1.2rem, 2vw, 1.4rem);
        --fs-xl: clamp(1.4rem, 3vw, 1.875rem);
        --fs-2xl: clamp(1.75rem, 4vw, 2.5rem);
        --fs-3xl: clamp(2rem, 5vw, 3.5rem);
        --fs-display: clamp(2.75rem, 7vw, 5.25rem);

        /* Font weights */
        --fw-light: 300;
        --fw-regular: 400;
        --fw-medium: 500;
        --fw-semibold: 600;
        --fw-bold: 700;

        /* Line heights */
        --lh-tight: 1.1;
        --lh-snug: 1.3;
        --lh-normal: 1.5;

        /* ── Spacing scale ───────────────────────────────── */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;

        /* ── Layout ──────────────────────────────────────── */
        --nav-height: 60px;
        --drawer-width: 280px;
        --filter-width: 260px;
        --cart-width: 420px;
        --content-width: 1200px;
        --content-max: 64rem;
        --content-pad: clamp(1rem, 4vw, 2rem);
        --prose-max: 620px;

        /* ── Sizes ───────────────────────────────────────── */
        --size-icon: 4.5rem;
        --swatch-lg: 28px;
        --thumb-size: 64px;

        /* ── Radii ───────────────────────────────────────── */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-full: 9999px;

        /* ── Shadows ─────────────────────────────────────── */
        --shadow-sm: 0 1px 4px rgb(0 0 0 / 0.07);
        --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);
        --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.1);

        /* ── Transitions ─────────────────────────────────── */
        --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ── Local Golos Text fonts ──────────────────────── */
    @font-face {
        font-family: "Golos Text";
        src: url("/fonts/GolosText-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Golos Text";
        src: url("/fonts/GolosText-Medium.ttf") format("truetype");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Golos Text";
        src: url("/fonts/GolosText-SemiBold.ttf") format("truetype");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Golos Text";
        src: url("/fonts/GolosText-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
}

@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body {
        min-height: 100vh;
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--ff-base);
        font-size: var(--fs-base);
        line-height: var(--lh-normal);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
        line-height: var(--lh-snug);
        font-weight: var(--fw-semibold);
    }

    h1 {
        font-size: var(--fs-3xl);
    }

    h2 {
        font-size: var(--fs-2xl);
    }

    h3 {
        font-size: var(--fs-xl);
    }

    h4 {
        font-size: var(--fs-lg);
    }

    p,
    li {
        text-wrap: pretty;
    }

    img,
    picture,
    video {
        max-width: 100%;
        display: block;
    }

    /* The `hidden` attribute must win even over component rules that set an
     explicit `display` (author styles otherwise beat the UA [hidden] rule).
     JS toggles `.hidden` on the cart empty/footer, filter badge, etc. */
    [hidden] {
        display: none !important;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    ul,
    ol {
        list-style: none;
    }

    [role="list"] {
        list-style: none;
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer utilities {

    /* Screen reader only */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* Focus ring */
    :focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        border-radius: var(--radius-sm);
    }

    /* Centred max-width wrapper */
    .container {
        width: 100%;
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--content-pad);
    }

    /* Section spacing */
    .section {
        padding-block: var(--space-20);
    }

    /* ── Section washes ───────────────────────────────
     Alternate these down the page for scroll rhythm.
     Keep most sections on the plain base background. */
    .section--sage {
        background: var(--wash-sage);
    }

    .section--deep {
        background: var(--wash-deep);
        color: var(--color-cream);
    }

    .section--deep h1,
    .section--deep h2,
    .section--deep h3,
    .section--deep .font-bold {
        color: var(--color-white);
    }

    .section--deep .text-muted {
        color: color-mix(in oklch, var(--color-cream), transparent 25%);
    }

    /* Hero: soft radial glow behind the product image.
     Apply to the hero <section>; the glow paints under content. */
    .section--hero {
        background:
            var(--glow-hero),
            var(--color-bg);
    }

    /* Eyebrow label (small caps) */
    .label-caps {
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    /* Clamp long text to 3 lines (card leads etc.) */
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── Buttons ─────────────────────────────────────── */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.65em 1.4em;
        border-radius: var(--radius-full);
        font-size: var(--fs-sm);
        font-weight: var(--fw-medium);
        line-height: 1;
        transition: background-color 0.15s var(--ease-out),
            border-color 0.15s var(--ease-out),
            color 0.15s var(--ease-out);
    }

    .btn--brand {
        background: var(--color-accent);
        color: var(--color-white);
    }

    .btn--brand:hover {
        background: var(--color-accent-hover);
    }

    .btn--secondary {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    .btn--secondary:hover {
        border-color: var(--color-text-muted);
    }

    /* Buttons placed inside .section--deep */
    .btn--on-dark {
        background: var(--color-text-on-dark);
        color: var(--color-accent-hover);
    }

    .btn--on-dark:hover {
        background: var(--color-white);
    }

    .btn--ghost-dark {
        background: transparent;
        border: 1px solid color-mix(in oklch, var(--color-text-on-dark), transparent 50%);
        color: var(--color-text-on-dark);
    }

    .btn--ghost-dark:hover {
        border-color: var(--color-text-on-dark);
    }

    /* ── Scroll reveal (pairs with /static/js/reveal.js) ─
     Elements with [data-reveal] fade-rise in on scroll.
     No-JS and reduced-motion users see content normally. */
    @media (prefers-reduced-motion: no-preference) {
        .js-reveal-ready [data-reveal] {
            opacity: 0;
            translate: 0 16px;
            transition: opacity 0.6s var(--ease-out),
                translate 0.6s var(--ease-out);
        }

        .js-reveal-ready [data-reveal].is-visible {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* Muted text */
    .text-muted {
        color: var(--color-text-muted);
    }

    .text-accent {
        color: var(--color-accent);
    }

    .text-sm {
        font-size: var(--fs-sm);
    }

    .text-xs {
        font-size: var(--fs-xs);
    }

    .font-medium {
        font-weight: var(--fw-medium);
    }

    .font-semibold {
        font-weight: var(--fw-semibold);
    }

    .font-bold {
        font-weight: var(--fw-bold);
    }

    .text-center {
        text-align: center;
    }
}