@import '@fontsource-variable/inter';
@import '@fontsource-variable/space-grotesk';
@import '@fontsource/instrument-serif/400-italic.css';
@import '@fontsource/instrument-serif/400.css';
@import './tokens.css';

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

@layer base {
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { @apply bg-paper font-sans text-ink antialiased; font-size: 1.0625rem; line-height: 1.65; }
    h1, h2, h3, h4 { @apply font-display; }
    :focus-visible { outline: 2px solid rgb(var(--lilac)); outline-offset: 3px; border-radius: 2px; }
    ::selection { background: rgb(var(--violet) / 0.35); }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }
}

@layer components {
    .wrap { @apply mx-auto w-full max-w-page px-5 sm:px-8; }
    .section { padding-block: var(--section); }
    .on-dark { @apply bg-ink text-ice; }
    .on-deep { @apply bg-panel text-ice; }
    .on-light { @apply bg-paper text-ink; }
    .on-ice { @apply bg-ice text-ink; }

    .skip-link { @apply absolute left-3 top-3 z-[100] -translate-y-20 rounded bg-ice px-4 py-2 text-ink; }
    .skip-link:focus { @apply translate-y-0; }

    .eyebrow { @apply mb-5 flex items-center gap-3 font-display text-[0.75rem] font-medium uppercase tracking-[0.18em] text-steel; }
    .eyebrow::before { content: ''; @apply block h-px w-8 bg-violet-hi; }
    .on-light .eyebrow, .on-ice .eyebrow { @apply text-muted; }

    .display { @apply font-display font-medium tracking-tightest; line-height: 1.02; font-size: clamp(2.5rem, 6.2vw, 5.25rem); }
    .h2 { @apply font-display font-medium tracking-tightest; line-height: 1.05; font-size: clamp(2rem, 4.4vw, 3.5rem); }
    .h3 { @apply font-display text-xl font-medium tracking-tight sm:text-2xl; }
    .lead { @apply max-w-xl text-lg text-steel sm:text-xl; line-height: 1.55; }
    .on-light .lead, .on-ice .lead { @apply text-muted; }
    .accent { @apply font-serif font-normal italic; letter-spacing: -0.01em; }

    .btn { @apply inline-flex min-h-[3rem] items-center justify-center gap-2 rounded-[6px] px-6 font-display text-[0.95rem] font-medium transition duration-200; }
    .btn-primary { @apply bg-violet text-white hover:bg-violet-hi; }
    .btn-ghost-dark { @apply border border-white/25 text-ice hover:border-white/60 hover:bg-white/5; }
    .btn-ghost-light { @apply border border-ink/25 text-ink hover:border-ink/60 hover:bg-ink/5; }
    .btn svg { @apply h-4 w-4 transition-transform duration-200; }
    .btn:hover svg { @apply translate-x-0.5; }

    .rule-row { @apply flex items-baseline gap-4 border-t border-current/15 py-5 transition-colors duration-200 sm:gap-8 sm:py-6; }
    .rule-row:last-child { @apply border-b; }
    a.rule-row:hover { @apply bg-violet/[0.06]; }

    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
    .reveal.is-in { opacity: 1; transform: none; }
    .no-js .reveal { opacity: 1; transform: none; }

    .chip { @apply inline-flex items-center rounded-full border border-current/20 px-3 py-1 text-xs font-medium tracking-wide; }

    .field { @apply w-full rounded-[6px] border border-ink/25 bg-white px-4 py-3 text-ink placeholder:text-muted/70 focus:border-violet focus:outline-none; }
    .label { @apply mb-2 block font-display text-sm font-medium text-ink; }
    .error { @apply mt-1 text-sm text-red-700; }

    .prose-site { @apply max-w-prose; }
    .prose-site h2 { @apply mt-10 mb-3 font-display text-2xl font-medium tracking-tight; }
    .prose-site h3 { @apply mt-8 mb-2 font-display text-xl font-medium; }
    .prose-site p, .prose-site ul, .prose-site ol { @apply mb-5; }
    .prose-site ul { @apply list-disc pl-5; }
    .prose-site ol { @apply list-decimal pl-5; }
    .prose-site a { @apply text-violet underline underline-offset-4 hover:text-violet-hi; }
    .prose-site blockquote { @apply border-l-2 border-violet pl-5 font-serif text-xl italic; }

    /* 3D scene host. The fallback shows until the first WebGL frame is drawn, and stays if WebGL fails. */
    .scene-host { position: relative; width: 100%; touch-action: pan-y; }
    .scene-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .scene-fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.6s var(--ease); }
    .scene-ready .scene-fallback { opacity: 0; pointer-events: none; }
    .scene-label { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -140%); @apply rounded bg-ice px-2.5 py-1 font-display text-xs font-medium text-ink; }

    .part-btn { @apply flex w-full items-center gap-4 border-t border-white/15 py-3 text-left font-display text-base text-steel transition-colors duration-200 hover:text-ice; }
    .part-btn .n { @apply w-7 text-xs tabular-nums text-steel/70; }
    .part-btn[aria-pressed='true'] { @apply text-ice; }
    .part-btn[aria-pressed='true'] .n { @apply text-lilac; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
}