@layer design-system, reset, base, utilities, components, layout, overrides;
@import "https://unpkg.com/open-props" layer(design-system.tokens);
@import "https://cdn.jsdelivr.net/gh/mobalti/open-props-interfaces@main/hdr-palettes-astro-op/src/styles/hdr-palettes.css" layer(design-system.tokens-hdr);
/* Palettes demo: https://codepen.io/mobalti/pen/jEPRydX  */
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=arrow_back,arrow_forward,arrow_forward_ios&display=block" layer(design-system.symbols);

@layer reset {

    *,
    ::before,
    ::after {
        box-sizing: border-box;
    }

    :where(:not(dialog)) {
        margin: 0;
    }

    :where(html) {
        -webkit-text-size-adjust: none;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    }

    :where(body) {
        min-block-size: 100svb;
        -webkit-font-smoothing: antialiased;
    }
}

@layer base {
    html {
        color-scheme: dark;

        /* Adjust the chroma for all palettes */
        --palette-chroma: 1;


        /* Contrast function based on perceptual lightness (OKLCH) */
        --threshold: 0.625;
        --contrast-fn: min(max(((l - var(--threshold)) * -infinity), 0), 1);



        /* Semantic tokens */
        --ui-surface: var(--hdr-purple-15);
        --ui-surface-container: var(--hdr-purple-14);
        --ui-on-surface: oklch(from var(--ui-surface) var(--contrast-fn) 0 h);
        --ui-primary: var(--hdr-orange-2);

        --ui-spacing-none: 0;
        --ui-spacing-xxs: var(--size-1);
        --ui-spacing-xs: var(--size-2);
        --ui-spacing-sm: var(--size-3);
        --ui-spacing-md: var(--size-5);
        --ui-spacing-lg: var(--size-7);
        --ui-spacing-xl: var(--size-8);
        --ui-spacing-xxl: var(--size-11);

        --base-font: "Roboto";
        --ui-label: var(--font-weight-5) var(--font-size-1) / var(--font-lineheight-0) var(--base-font), var(--font-system-ui);
        --ui-body: var(--font-weight-4) var(--font-size-2) / var(--font-lineheight-3) var(--base-font), var(--font-system-ui);
        --ui-title: var(--font-weight-5) var(--font-size-4) / var(--font-lineheight-1) var(--base-font), var(--font-system-ui);

        --ui-icon-font-family: 'Material Symbols Outlined';
        --icon-font-small: var(--font-weight-6) var(--font-size-1) / 1 var(--ui-icon-font-family);
        --icon-font-medium: var(--font-weight-4) var(--font-size-4) / 0 var(--ui-icon-font-family);



        /* Force dark theme shadow values in light mode */
        /* OSlight */
        @media (prefers-color-scheme: light) {
            --shadow-color: 220 40% 2%;
            --shadow-strength: 25%;
        }

        /* Component-specific token */
        --ui-scroll-btn-radius: var(--radius-4);
        --ui-scroll-btn-layer: var(--layer-3);
        --ui-scroll-btn-outline: var(--border-size-2) dashed var(--ui-primary);
        --ui-scroll-btn-border: var(--border-size-1) solid var(--ui-primary);
        --ui-scroll-btn-size: var(--size-px-9);


        --ui-visual-radius: var(--radius-3);
        --ui-card-radius: calc(var(--ui-visual-radius) * 1.25);
        --ui-btn-radius: var(--radius-2);
        --ui-icon-size: var(--size-7);
        --ui-card-shadow: var(--shadow-2);

    }
}


@layer layout {
    .section {
        container-type: inline-size;
        min-block-size: 100svb;

        background: var(--ui-surface-container) url('https://raw.githubusercontent.com/mobalti/open-props-interfaces/refs/heads/main/hdr-palettes-astro-op/src/assets/images/hero.avif') no-repeat center / cover;

        inline-size: 100%;

        display: grid;
        place-items: center;
        column-gap: var(--ui-spacing-xs);
        row-gap: var(--ui-spacing-lg);
        padding-block: var(--ui-spacing-xxl);
    }

    .cards {
        --_carousel-inline-padding: var(--ui-spacing-sm);
        display: grid;
        gap: var(--ui-spacing-sm);
        grid-auto-flow: column;
        grid-column: 2/-1;
        grid-template-rows: 200px 1fr;
        inline-size: 100%;
        list-style: none;
        min-block-size: 600px;
        overflow-inline: auto;
        overscroll-behavior-inline: contain;
        padding-block: var(--ui-spacing-lg);
        padding-inline: var(--_carousel-inline-padding);
        scroll-behavior: smooth;
        scroll-padding-inline: var(--_carousel-inline-padding);
        scroll-snap-type: inline mandatory;

        /* md-n-above */
        @media (width >=768px) {
            --_carousel-inline-padding: var(--ui-spacing-lg);
        }
    }

    .card {
        scroll-snap-align: start;
        /* scroll-snap-stop: always; */
        background-color: var(--ui-surface);
        border-radius: var(--ui-card-radius);
        box-shadow: var(--ui-card-shadow);
        display: grid;
        grid-row: 1/-1;
        grid-template-rows: subgrid;
        padding: var(--ui-spacing-xs);
        inline-size: min(75cqi, 400px);
    }

    .visual {
        border-radius: var(--ui-visual-radius);
        overflow: clip;
    }

    .img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        /* fallback */
        background-color: var(--ui-surface-container);
    }

    .content {
        display: grid;
        align-content: space-between;
        padding: var(--ui-spacing-sm);
        gap: var(--ui-spacing-lg);
        color: var(--ui-on-surface);
    }

    .content-wrapper {
        display: grid;
        gap: var(--ui-spacing-sm);
    }

    .title {
        font: var(--ui-title);
        text-wrap: pretty;
    }

    .desc {
        font: var(--ui-body);
        text-wrap: pretty;
    }

    .card-link {
        --_icon-bg: var(--ui-primary);
        font: var(--ui-label);
        color: var(--ui-primary);
        text-decoration: none;
        display: flex;
        gap: var(--ui-spacing-xs);
        align-items: center;

        &:hover {
            --_icon-bg: color-mix(in oklch, var(--ui-primary), var(--ui-on-surface) 8%);
        }

        &::before {
            display: grid;
            place-items: center;
            background-color: var(--_icon-bg);
            color: oklch(from var(--ui-primary) var(--contrast-fn) 0 h);
            inline-size: var(--ui-icon-size);
            block-size: var(--ui-icon-size);
            border-radius: var(--ui-btn-radius);
            font: var(--icon-font-small);
            content: 'arrow_forward_ios' / 'Arrow';
        }
    }

    @supports (scroll-marker-group: after) {
        .cards {
            anchor-name: --carousel;
            scrollbar-width: none;

            &::scroll-button(*) {
                -webkit-tap-highlight-color: transparent;
                -webkit-touch-callout: none;
                background-color: transparent;
                block-size: var(--ui-scroll-btn-size);
                border-radius: var(--ui-scroll-btn-radius);
                color: var(--ui-primary);
                cursor: pointer;
                display: inline grid;
                font: var(--icon-font-medium);
                inline-size: var(--ui-scroll-btn-size);
                outline-width: 0;
                place-items: center;
                position-anchor: --carousel;
                inset-block-end: calc(anchor(end) - calc(var(--ui-spacing-xs) + var(--ui-scroll-btn-size)));
                inset-inline-start: calc(anchor(start) + var(--_carousel-inline-padding));
                position: absolute;
                user-select: none;
                border: var(--ui-scroll-btn-border);
            }

            &::scroll-button(*):focus:not(:disabled) {
                outline: var(--ui-scroll-btn-outline);
            }

            &::scroll-button(*):disabled {
                cursor: not-allowed;
                opacity: 0.4;
            }

            &::scroll-button(*):not(:disabled):hover {
                background-color: oklch(from var(--ui-on-surface) l c h / 8%);
            }

            &::scroll-button(inline-start) {
                content: 'arrow_back' / 'Scroll back';
            }

            &::scroll-button(inline-end) {
                content: 'arrow_forward' / 'Scroll forward';
                inset-inline-start: calc(anchor(start) + var(--ui-spacing-xs) + var(--ui-scroll-btn-size) + var(--_carousel-inline-padding));
            }
        }
    }
}