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

@layer base {
    /*
     * Alpine hides x-cloak elements only once it has booted. Without this
     * rule they flash visible on page load — the checkout's "Copied" label
     * was doing exactly that.
     */
    [x-cloak] {
        display: none !important;
    }

    /*
     * Headings across the public site use the display face. :where() keeps
     * the specificity at zero classes, so any utility on the element still
     * wins — the mono eyebrows (`font-mono text-xs …`) keep their face, and
     * a deliberate `font-sans` opts a heading back out entirely.
     *
     * Anton ships a single 400 weight. Bold utilities on these headings
     * would faux-bold it, which is why the views avoid font-extrabold on
     * h1/h2 now.
     */
    :where(.site) h1,
    :where(.site) h2 {
        font-family: Anton, Figtree, ui-sans-serif, system-ui, sans-serif;
        font-weight: 400;
        letter-spacing: 0.015em;
    }
}

@layer components {
    /*
     * Film grain over the near-black ground, as in the approved design.
     * Inline SVG turbulence, desaturated so the noise is monochrome — raw
     * feTurbulence output is coloured confetti.
     */
    .bg-noise {
        background-color: #0b0806;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    }

    /*
     * Spray-paint splatter at opposite corners of a framed element — the
     * amber overspray around the hero image in the mockup. Layered
     * radial-gradient dots rather than hand-authored SVG paths: one soft
     * blob plus a scatter of hard-edged droplets, mirrored by rotating the
     * same layer stack 180° for the second corner.
     *
     * The pseudo-elements hang outside the box, so the nearest full-width
     * ancestor needs overflow-hidden or the page grows a horizontal
     * scrollbar on mobile.
     */
    .spray-corners {
        position: relative;
    }

    .spray-corners::before,
    .spray-corners::after {
        content: '';
        position: absolute;
        width: 11rem;
        height: 11rem;
        pointer-events: none;
        background-repeat: no-repeat;
        background-image:
            radial-gradient(circle at 22% 26%, rgba(245, 166, 35, 0.16) 0 46px, transparent 47px),
            radial-gradient(circle at 14% 12%, #f5a623 0 9px, transparent 10px),
            radial-gradient(circle at 32% 30%, #e8891a 0 6px, transparent 7px),
            radial-gradient(circle at 8% 40%, #f5a623 0 5px, transparent 6px),
            radial-gradient(circle at 44% 12%, rgba(245, 166, 35, 0.85) 0 4px, transparent 5px),
            radial-gradient(circle at 26% 52%, rgba(232, 137, 26, 0.8) 0 3px, transparent 4px),
            radial-gradient(circle at 54% 34%, rgba(245, 166, 35, 0.6) 0 2.5px, transparent 3.5px),
            radial-gradient(circle at 62% 16%, rgba(245, 166, 35, 0.5) 0 2px, transparent 3px),
            radial-gradient(circle at 40% 44%, rgba(200, 111, 13, 0.5) 0 2px, transparent 3px),
            radial-gradient(circle at 70% 46%, rgba(245, 166, 35, 0.35) 0 1.5px, transparent 2.5px);
    }

    .spray-corners::before {
        top: -2.75rem;
        left: -2.75rem;
    }

    .spray-corners::after {
        right: -2.75rem;
        bottom: -2.75rem;
        transform: rotate(180deg);
    }

    /*
     * Breeze's auth views carry light-theme utility classes inline
     * (text-gray-600 on what is now a dark card, gray-300 borders, indigo
     * focus rings). Rather than editing every scaffolded view, the card
     * recolours them — a class selector outranks a bare utility, so no
     * !important is needed.
     *
     * The element list matters: the intro copy on forgot-password,
     * verify-email and confirm-password lives in <div>s, and "Log Out" on
     * verify-email is a <button>. Matching only a/span left both at
     * gray-600 on near-black, around 2.5:1.
     */
    .auth-card div,
    .auth-card p,
    .auth-card span,
    .auth-card label {
        @apply text-stone-300;
    }

    .auth-card a,
    .auth-card button:not([type='submit']) {
        @apply text-stone-300 underline-offset-2 hover:text-amber-400;
    }

    /*
     * The remember-me checkbox is the one raw input Breeze leaves unstyled by
     * our component layer, so it keeps the forms plugin's white fill and
     * indigo check on a near-black card.
     */
    .auth-card input[type='checkbox'] {
        @apply rounded border-stone-500 bg-ink-950 text-amber-500 focus:ring-amber-500 focus:ring-offset-ink-900;
    }
}