@import 'tailwindcss';

@plugin '@tailwindcss/typography';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

/*
|--------------------------------------------------------------------------
| The Builders Residence — design tokens
|--------------------------------------------------------------------------
| Colours sampled from the gold monogram in docs/brief/logo-original.jpeg.
| The palette is deliberately narrow: a near-black ground, two golds, and a
| warm off-white. Restraint is what reads as "luxury" here — every extra hue
| cheapens it.
*/
@theme {
    /* Grounds */
    --color-ink: #0a0a0a;
    --color-ink-soft: #141414;
    --color-ink-raised: #1c1c1c;
    --color-ink-line: #2a2a2a;

    /* Accent — the logo gradient runs gold → gold-bright → gold */
    --color-gold: #c6a153;
    --color-gold-bright: #e3c77e;
    --color-gold-deep: #8f7133;

    /*
     * Text on dark. Three steps, all of which clear WCAG AA (4.5:1) against
     * both --color-ink and --color-ink-soft:
     *   bone       17.6:1  body copy
     *   bone-muted  7.8:1  secondary copy
     *   bone-dim    5.2:1  help text, placeholders, timestamps
     *
     * Dim text must use bone-dim rather than an opacity modifier on
     * bone-muted — /70 measures 4.28:1 and /40 only 2.14:1, both failing AA.
     */
    --color-bone: #f5f1e8;
    --color-bone-muted: #a8a29a;
    --color-bone-dim: #86827b;

    /* Type families */
    --font-display: 'Cormorant Garamond', ui-serif, Georgia, serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* Fluid display scale — the oversized headlines in the reference design */
    --text-display-sm: clamp(1.75rem, 3.2vw, 2.75rem);
    --text-display: clamp(2.5rem, 6vw, 5rem);
    --text-display-lg: clamp(3rem, 8vw, 7rem);

    /* The wide-tracked micro-labels above each section */
    --tracking-luxe: 0.28em;
}

@layer base {
    /* Keeps Alpine-controlled elements hidden until Alpine boots. */
    [x-cloak] {
        display: none !important;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-ink);
        color: var(--color-bone);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    ::selection {
        background-color: var(--color-gold);
        color: var(--color-ink);
    }

    /* Visible focus for keyboard users, suppressed for mouse clicks. */
    :focus-visible {
        outline: 2px solid var(--color-gold);
        outline-offset: 3px;
    }

    /* Respect users who have asked the OS to reduce motion. */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

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

@layer components {
    /*
     * The section eyebrow: a small gold diamond followed by wide-tracked caps.
     * Repeats above nearly every section on the site.
     */
    .section-label {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: var(--tracking-luxe);
        text-transform: uppercase;
        color: var(--color-gold);
    }

    .section-label::before {
        content: '';
        width: 0.3125rem;
        height: 0.3125rem;
        rotate: 45deg;
        background-color: var(--color-gold);
    }

    /*
     * Scroll reveal, driven by the observer in app.js.
     *
     * The hidden resting state is scoped to `.js`, which an inline script in
     * the document head sets before first paint. Two reasons for that:
     * without JavaScript nothing is ever hidden, and because the rule applies
     * from the very first frame there is no fade-out flash on content that was
     * already on screen.
     */
    .js [data-reveal] {
        opacity: 0;
        translate: 0 1.5rem;
        transition:
            opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    /* Motion-sensitive users get the content, never the animation. */
    @media (prefers-reduced-motion: reduce) {
        .js [data-reveal] {
            opacity: 1;
            translate: 0 0;
            transition: none;
        }
    }

    /* Gold hairline that separates stacked sections. */
    .hairline {
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            var(--color-ink-line) 15%,
            var(--color-ink-line) 85%,
            transparent
        );
    }
}