@import 'tailwindcss';

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

@theme {
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto,
        'Helvetica Neue', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    /* Refined, restrained palette — warm neutrals with a single confident accent */
    --color-accent-50: #fdf2f4;
    --color-accent-100: #fce7ea;
    --color-accent-600: #c02d4e;
    --color-accent-700: #a12341;
    --color-accent-800: #841e37;
    --color-gold-400: #d9a441;
    --color-gold-500: #c98f2b;
}

[x-cloak] {
    display: none !important;
}

/* ---------- Apple-style foundations ---------- */

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        scroll-behavior: smooth;
    }

    body {
        letter-spacing: -0.011em; /* near-zero body tracking */
        font-variant-numeric: tabular-nums;
    }

    /* Optical sizing: tighten display text, size-specific never fixed */
    h1, h2 {
        letter-spacing: -0.022em;
        line-height: 1.08;
    }
    h3, h4 {
        letter-spacing: -0.014em;
        line-height: 1.2;
    }

    ::selection {
        background: var(--color-accent-100);
        color: var(--color-accent-800);
    }

    /* Focus states — visible, calm */
    :focus-visible {
        outline: 2px solid var(--color-accent-600);
        outline-offset: 3px;
        border-radius: 4px;
    }
}

/* ---------- Motion ---------- */

/* Instant press feedback — respond on pointer-down, not release */
.press {
    transition: transform 100ms ease-out, box-shadow 150ms ease-out;
}
.press:active {
    transform: scale(0.97);
}

/* Scroll reveal — gentle rise, interruptible via CSS only */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Translucent material — content scrolls under chrome */
.material {
    background: color-mix(in srgb, white 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.material-dark {
    background: color-mix(in srgb, #1c1917 65%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

/* Reduced motion — cross-fade, never slide/spring */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: opacity 200ms ease;
    }
    .press:active {
        transform: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}