@import 'tailwindcss';
@import './tokens.css';

@plugin "daisyui" {
    themes: false;
}

@plugin "daisyui/theme" {
    name: "amare";
    default: true;
    color-scheme: light;

    --color-base-100: var(--amare-color-bg);
    --color-base-200: var(--amare-color-bg-deep);
    --color-base-300: var(--amare-color-bg-archive);
    --color-base-content: var(--amare-color-text);
    --color-primary: var(--amare-color-accent);
    --color-primary-content: var(--amare-color-accent-text);
    --color-secondary: var(--amare-color-sage);
    --color-secondary-content: var(--amare-color-text);
    --color-accent: var(--amare-color-accent-deep);
    --color-accent-content: var(--amare-color-accent-text);
    --color-neutral: var(--amare-color-muted);
    --color-neutral-content: var(--amare-color-accent-text);
    --color-info: #2563eb;
    --color-info-content: #ffffff;
    --color-success: var(--amare-color-success);
    --color-success-content: var(--amare-color-accent-text);
    --color-warning: var(--amare-color-warning);
    --color-warning-content: var(--amare-color-accent-text);
    --color-error: var(--amare-color-error);
    --color-error-content: var(--amare-color-accent-text);

    --radius-selector: 0;
    --radius-field: 0;
    --radius-box: 0;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

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

@theme {
    --font-sans: var(--amare-font-sans);
    --font-serif: var(--amare-font-serif);

    --text-xs: var(--amare-text-xs);
    --text-sm: var(--amare-text-sm);
    --text-base: var(--amare-text-base);
    --text-lg: var(--amare-text-lg);
    --text-xl: var(--amare-text-xl);
    --text-2xl: var(--amare-text-2xl);
    --text-3xl: var(--amare-text-3xl);
    --text-4xl: var(--amare-text-4xl);

    --text-display: clamp(3rem, 7.7vw, 5.875rem);
    --text-display--line-height: 0.94;
    --text-display--letter-spacing: -0.01em;

    --text-hero-spread: clamp(3rem, 5.5vw, 5rem);
    --text-hero-spread--line-height: 0.94;
    --text-hero-spread--letter-spacing: -0.01em;

    --text-headline: clamp(2.375rem, 5.2vw, 4rem);
    --text-headline--line-height: 1.02;

    --spacing-1: var(--amare-space-1);
    --spacing-2: var(--amare-space-2);
    --spacing-3: var(--amare-space-3);
    --spacing-4: var(--amare-space-4);
    --spacing-6: var(--amare-space-6);
    --spacing-8: var(--amare-space-8);
    --spacing-12: var(--amare-space-12);
    --spacing-16: var(--amare-space-16);

    --radius-sm: var(--amare-radius-sm);
    --radius-md: var(--amare-radius-md);
    --radius-lg: var(--amare-radius-lg);
    --radius-xl: var(--amare-radius-xl);
    --radius-full: var(--amare-radius-full);

    --color-amare-bg: var(--amare-color-bg);
    --color-amare-bg-deep: var(--amare-color-bg-deep);
    --color-amare-bg-archive: var(--amare-color-bg-archive);
    --color-amare-bg-muted: var(--amare-color-bg-muted);
    --color-amare-text: var(--amare-color-text);
    --color-amare-muted: var(--amare-color-muted);
    --color-amare-text-muted: var(--amare-color-text-muted);
    --color-amare-border: var(--amare-color-border);
    --color-amare-accent: var(--amare-color-accent);
    --color-amare-accent-deep: var(--amare-color-accent-deep);
    --color-amare-accent-hover: var(--amare-color-accent-hover);
    --color-amare-sage: var(--amare-color-sage);
    --color-amare-accent-text: var(--amare-color-accent-text);
    --color-amare-success: var(--amare-color-success);
    --color-amare-warning: var(--amare-color-warning);
    --color-amare-error: var(--amare-color-error);

    --ease-amare: var(--amare-ease-standard);
    --default-transition-duration: var(--amare-duration-normal);

    /* Neutralised, not omitted. Tailwind's Vite plugin shares one context
     * across every entry in the build, so the Filament theme entry's
     * `@source app/Filament/**` makes Filament's `shadow-*` usage visible and
     * Tailwind then emits its DEFAULT --shadow-sm/md/lg into this public
     * bundle too — verified by diffing the built app.css with and without
     * that entry. Nothing public uses a shadow utility today, so rendering is
     * unchanged either way, but leaving real shadow values defined here would
     * let a future `shadow-sm` on a public element silently violate
     * DESIGN.md's Tonal Layer Rule, and HeritageEditorialTokensTest only
     * inspects source files, so it would not catch it. Zeroing them keeps the
     * rule true in the artifact that actually ships. */
    --shadow-2xs: 0 0 #0000;
    --shadow-xs: 0 0 #0000;
    --shadow-sm: 0 0 #0000;
    --shadow: 0 0 #0000;
    --shadow-md: 0 0 #0000;
    --shadow-lg: 0 0 #0000;
    --shadow-xl: 0 0 #0000;
    --shadow-2xl: 0 0 #0000;
    --shadow-inner: 0 0 #0000;
}

@layer base {
    body {
        background-color: var(--amare-color-bg);
        color: var(--amare-color-text);
        font-family: var(--amare-font-serif);
        overflow-wrap: break-word;
    }

    [id$='-heading'],
    .home-chapter[id] {
        scroll-margin-top: 5.5rem;
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid var(--amare-color-accent);
        outline-offset: 3px;
    }
}

@utility container-amare {
    width: 100%;
    max-width: var(--amare-container-max);
    margin-inline: auto;
    padding-inline: var(--amare-container-padding);
}

@utility img-editorial {
    filter: saturate(0.88) contrast(0.96);
}

@utility honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@layer components {
    .main-nav.is-open {
        display: flex;
    }

    @media (prefers-reduced-motion: no-preference) {
        .main-nav {
            transition: opacity var(--amare-duration-normal) var(--amare-ease-standard);
        }
    }

    body.menu-open {
        overflow: hidden;
    }

    main {
        overflow-x: clip;
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(a, button, input, textarea, select) {
            transition-duration: var(--amare-motion-feedback);
            transition-property: color, background-color, border-color, transform;
            transition-timing-function: var(--amare-ease-arrival);
        }

        :where(a, button:not(:disabled)):active {
            transform: translateY(1px);
        }

        /* Transform/clip only — never fade text opacity (axe + WCAG mid-transition). */
        html[data-motion="enhance"] [data-motion="page-open"]:not(.is-active) [data-motion-beat] {
            transform: translateY(var(--amare-motion-distance-y));
        }

        html[data-motion="enhance"] [data-motion="page-open"]:not(.is-active) [data-motion-beat="media"] {
            clip-path: inset(4% 0 0 0);
        }

        html[data-motion="enhance"] [data-motion="page-open"].is-active [data-motion-beat] {
            transform: none;
            clip-path: inset(0 0 0 0);
            transition:
                transform var(--amare-motion-enter) var(--amare-ease-arrival),
                clip-path var(--amare-motion-enter) var(--amare-ease-arrival);
            transition-delay: min(
                calc(var(--motion-index, 0) * var(--amare-motion-stagger)),
                var(--amare-motion-stagger-cap)
            );
        }

        html[data-motion="enhance"] [data-reveal] {
            --motion-translate-x: 0;
            --motion-translate-y: var(--amare-motion-distance-y);
        }

        html[data-motion="enhance"] [data-reveal-from="left"] {
            --motion-translate-x: calc(-1 * var(--amare-motion-distance-x-mobile));
            --motion-translate-y: 0;
        }

        html[data-motion="enhance"] [data-reveal-from="right"] {
            --motion-translate-x: var(--amare-motion-distance-x-mobile);
            --motion-translate-y: 0;
        }

        @media (min-width: 768px) {
            html[data-motion="enhance"] [data-reveal-from="left"] {
                --motion-translate-x: calc(-1 * var(--amare-motion-distance-x));
            }

            html[data-motion="enhance"] [data-reveal-from="right"] {
                --motion-translate-x: var(--amare-motion-distance-x);
            }
        }

        html[data-motion="enhance"] [data-reveal]:not(.is-revealed) {
            transform: translate3d(var(--motion-translate-x), var(--motion-translate-y), 0);
        }

        html[data-motion="enhance"] [data-reveal][data-reveal-media]:not(.is-revealed) {
            clip-path: inset(3% 0 0 0);
        }

        html[data-motion="enhance"] [data-reveal-group] [data-reveal].is-revealed,
        html[data-motion="enhance"] [data-reveal].is-revealed {
            transform: none;
            clip-path: inset(0 0 0 0);
            transition:
                transform var(--amare-motion-enter) var(--amare-ease-arrival),
                clip-path var(--amare-motion-enter) var(--amare-ease-arrival);
            transition-delay: min(
                calc(var(--motion-index, 0) * var(--amare-motion-stagger)),
                var(--amare-motion-stagger-cap)
            );
        }
    }
}

/* daisyUI emits unlayered; match focus ring to the amare accent. */
.input:focus,
.select:focus,
.textarea:focus,
.checkbox:focus-visible {
    --input-color: var(--amare-color-accent);
}