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

@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);

    --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);
}

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

    [id$='-heading'] {
        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);
}

@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;
    }

    /* Dossiê vivo — content visible by default; enhance only when opted in */
    [data-chapter-index] {
        display: none;
    }

    [data-chapter-progress] {
        display: none;
        pointer-events: none;
    }

    [data-chapter-index] a[aria-current="true"] {
        color: var(--amare-color-accent-deep);
    }

    [data-chapter-index] a[aria-current="true"]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.35em;
        bottom: 0.35em;
        width: 1px;
        background: var(--amare-color-accent);
    }

    [data-chapter-progress] > span {
        display: block;
        height: 100%;
        width: var(--chapter-progress, 0%);
        background: var(--amare-color-accent);
        transform-origin: left center;
    }

    @media (min-width: 1280px) {
        [data-chapter-index] {
            display: flex;
            position: fixed;
            top: 50%;
            right: max(1rem, calc((100vw - var(--amare-container-max)) / 2 - 7.5rem));
            z-index: 30;
            max-width: 6.5rem;
            translate: 0 -50%;
            flex-direction: column;
            gap: 0.75rem;
        }

        [data-chapter-index] a {
            position: relative;
            padding-left: 0.75rem;
            font-size: var(--amare-text-xs);
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--amare-color-muted);
            text-decoration: none;
            transition: color var(--amare-duration-fast) var(--amare-ease-standard);
        }

        [data-chapter-index] a:hover {
            color: var(--amare-color-accent);
        }
    }

    @media (max-width: 1279px) {
        [data-chapter-progress] {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 45;
            width: 100%;
            height: 2px;
            background: transparent;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="seal"],
        html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="cta"] {
            opacity: 0;
            transform: translateY(0.5rem);
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="title"] {
            transform: translateY(0.4rem);
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="media"] {
            clip-path: inset(4% 0 0 0);
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat] {
            opacity: 1;
            transform: none;
            clip-path: inset(0 0 0 0);
            transition:
                opacity var(--amare-duration-slow) var(--amare-ease-arrival),
                transform var(--amare-duration-slow) var(--amare-ease-arrival),
                clip-path var(--amare-duration-focal) var(--amare-ease-arrival);
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="seal"] {
            transition-delay: 0ms;
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="title"] {
            transition-delay: 80ms;
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="media"] {
            transition-delay: 120ms;
        }

        html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="cta"] {
            transition-delay: 220ms;
        }

        html[data-motion="enhance"] [data-reveal]:not(.is-revealed) {
            opacity: 0;
            transform: translateY(0.5rem);
        }

        html[data-motion="enhance"] [data-reveal].is-revealed {
            opacity: 1;
            transform: none;
            transition:
                opacity var(--amare-duration-slow) var(--amare-ease-arrival),
                transform var(--amare-duration-slow) var(--amare-ease-arrival);
        }

        html[data-motion="enhance"] [data-motion="page-open"]:not(.is-active) {
            opacity: 0;
            transform: translateY(0.4rem);
        }

        html[data-motion="enhance"] [data-motion="page-open"].is-active {
            opacity: 1;
            transform: none;
            transition:
                opacity var(--amare-duration-normal) var(--amare-ease-arrival),
                transform var(--amare-duration-normal) var(--amare-ease-arrival);
        }
    }
}