@layer base, components, utility;

@import "./base.css";
@import "./components/button.css";
@import "./components/input.css";
@import "./components/list.css";
@import "./components/prose.css";
@import "./components/tabbar.css";
@import "./components/table.css";
@import "./components/toolbar.css";

@layer base {
    :root {
        --horizontal-safe-space: 1rem;
        --vertical-safe-space: 2rem;

        @media (width >=32rem) {
            --horizontal-safe-space: 2.5rem;
            --vertical-safe-space: 1.25rem;
        }

        @media (width >=64rem) {
            --horizontal-safe-space: 5rem;
            --vertical-safe-space: 2.5rem;
        }
    }

    * {
        scrollbar-width: none;
        line-height: normal;
        box-sizing: border-box;
    }

    html {
        font-family: sans-serif;
        font-size: clamp(16px, 0.833333333vw, 32px);
        scroll-behavior: smooth;
        overscroll-behavior: none;
    }

    body {
        color: oklch(100% 0% 0deg);
        background-color: oklch(20% 0% 0deg);
        overscroll-behavior: none;
    }

    html,
    body,
    video {
        min-width: 100dvw;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
    }

    video {
        object-fit: contain;
        display: block;
        width: 100dvw;
        aspect-ratio: initial;
        max-height: 100dvh;
    }
}

@layer components {
    .figure {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .figure img {
        box-shadow: inset 0 0 0.125rem oklch(100% 0% 0deg / 0.125), 0 0 1rem oklch(0% 0% 0deg / 0.125);
    }

    .figure figcaption {
        width: 100%;
        display: grid;
        padding-block: 1rem;
        transition: all 0.3s ease-in-out;
    }

    :focus .figure img {
        box-shadow: inset 0 0 0.125rem oklch(100% 0% 0deg / 0.125), 0 0 1rem oklch(0% 0% 0deg / 0.25);
    }

    :focus .figure figcaption {
        padding-block-start: 2rem;
    }
}


/* Grid */
@layer components {
    .scrollable.grid {
        scroll-padding-inline: var(--horizontal-safe-space);
        scroll-padding-block: var(--vertical-safe-space);
    }

    .grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 21rem;
        padding-inline: var(--horizontal-safe-space);
        padding-block: var(--vertical-safe-space);
        row-gap: calc(var(--vertical-safe-space) / 2);
        column-gap: calc(var(--horizontal-safe-space) / 2);
    }

    .grid--1 {
        grid-auto-columns: 110rem;
    }

    .grid--2 {
        grid-auto-columns: 53.75rem;
    }

    .grid--3 {
        grid-auto-columns: 35rem;
    }

    .grid--4 {
        grid-auto-columns: 25.625rem;
    }

    .grid--5 {
        grid-auto-columns: 20rem;
    }

    .grid--6 {
        grid-auto-columns: 16.25rem;
    }

    .grid--wrap {
        width: unset;
        grid-auto-flow: unset;

        &.grid--1 {
            grid-template-columns: repeat(auto-fill, 110rem);
        }

        &.grid--2 {
            grid-template-columns: repeat(auto-fill, 53.75rem);
        }

        &.grid--3 {
            grid-template-columns: repeat(auto-fill, 35rem);
        }

        &.grid--4 {
            grid-template-columns: repeat(auto-fill, 25.625rem);
        }

        &.grid--5 {
            grid-template-columns: repeat(auto-fill, 20rem);
        }

        &.grid--6 {
            grid-template-columns: repeat(auto-fill, 16.25rem);
        }
    }

    .grid-item {
        display: block;
    }

    .scrollable .grid-item {
        scroll-snap-align: start;
    }

    .header {
        padding-inline: var(--horizontal-safe-space);
        padding-block-start: var(--vertical-safe-space);
    }

    .layout {
        column-gap: var(--horizontal-safe-space);
        display: grid;
        padding-block: var(--vertical-safe-space);
        padding-inline: var(--horizontal-safe-space);
        row-gap: var(--vertical-safe-space);
    }

    @media (min-width: 32rem) {
        .one-column.layout {
            grid-template-columns: repeat(1, 1fr);
        }

        .two-column.layout {
            grid-template-columns: repeat(2, 1fr);
        }

        .three-column.layout {
            grid-template-columns: repeat(3, 1fr);
        }

        .layout .one-column {
            grid-column: span 1;
        }

        .layout .two-column {
            grid-column: span 2;
        }

        .layout .three-column {
            grid-column: span 3;
        }
    }

    .image {
        max-width: 100%;
        width: 64rem;
    }

    .navbar {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

}

@layer utility {
    .content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .scrollable {
        overflow: auto;
        overscroll-behavior: none;
        scroll-snap-type: inline mandatory;
    }

    .focusable {
        transition: all 0.3s ease-in-out;
    }

    .focusable:has(.growable) {
        margin-block-end: 0rem;
    }

    .focusable:focus:has(.growable) {
        margin-block-end: -1rem;
    }

    .growable {
        transition: all 0.3s ease-in-out;
        width: 100%;
    }

    :focus .growable {
        scale: 110%;
    }

    .primary {
        color: oklch(100% 0% 0deg / 100%);
    }

    .secondary {
        color: oklch(100% 0% 0deg / 75%);
    }

    .tertiary {
        color: oklch(100% 0% 0deg / 50%);
    }

    .emphasized {
        font-weight: 700;
    }

    .title1 {
        font-size: 2rem;
    }

    .title2 {
        font-size: 1.5rem;
    }

    .title3 {
        font-size: 1rem;
    }

    .headline {
        font-size: 1.5rem;
    }

    .callout {
        font-size: 1.25rem;
    }

    .body {
        font-size: 1.25rem;
    }

    .caption1 {
        font-size: 1.5rem;
    }

    .caption2 {
        font-size: 1rem;
    }

    .marquee {
        max-width: 100%;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
    }

    .thin {
        background-color: oklch(37% 0% 0deg / 13%);
    }

    .regular {
        background-color: oklch(0 0% 0deg / 8%);
    }

    .thick {
        background-color: oklch(0% 0% 0deg / 10%);
    }

    .chunker {
        background-color: oklch(5% 0% 0deg / 80%);
    }

    .glass {
        backdrop-filter: blur(2.5rem);
        box-shadow: inset 0 0 0.125rem oklch(100% 0% 0deg / 0.25);
    }

    .solid {
        background-color: oklch(0% 0% 0deg);
    }

    .sticky {
        position: sticky;
        top: 0;
        left: 0;
    }

    .fullscreen {
        display: block;
        width: 100dvw;
        height: 100dvh;
    }

    .circle {
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .square {
        aspect-ratio: 1;
    }

    .video {
        aspect-ratio: 16 / 9;
    }

    .contain {
        object-fit: contain;
    }

    .cover {
        object-fit: cover;
    }

    .block {
        display: block;
    }

    .clickable {
        cursor: pointer;
    }

    .center {
        text-align: center;
    }

    .end {
        text-align: end;
    }

    .start {
        text-align: start;
    }

    .fancy {
        background: #2A7B9B;
        background: linear-gradient(45deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    }

    .non-fancy {
        background: transparent;
        background: linear-gradient(180deg, oklch(100% 0% 0deg / 0.10) 0rem, transparent 50%, transparent 100%);
    }

    .rounded {
        border-radius: 1.25rem;
    }

    .very-rounded {
        border-radius: 2.5rem;
    }

    .background {
        background-color: oklch(0% 0% 0deg);
        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        min-height: 100dvh;
    }
}

/* Safe Space */
@layer utility {
    .horizontal-safe-space {
        padding-inline: var(--horizontal-safe-space);
    }

    .vertical-safe-space {
        padding-block: var(--vertical-safe-space);
    }
}

@layer components {
    .topbar {
        padding-inline: var(--horizontal-safe-space);
        padding-block: calc(var(--vertical-safe-space) / 2);
    }
}

@layer components {
    .dialog {
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        max-width: 100dvw;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .dialog .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: oklch(25% 0% 0deg);
        border-bottom: 1px solid oklch(100% 0% 0deg / 0.1);
        padding-block: 0;
    }

    .dialog .close {
        padding: 0.5rem;
        cursor: pointer;
        display: block;
    }

    .iframe {
        display: block;
        width: 100dvw;
        height: 100dvh;
        border: none;
        background-color: transparent;
    }

    .dialog {
        transition:
            display 0.125s allow-discrete,
            overlay 0.125s allow-discrete;

        animation: close 0.125s forwards;

        &[open] {
            animation: open 0.125s forwards;
        }
    }

    @keyframes open {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes close {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .dialog[open] {
        transition:
            scale 0.125s ease-out,
            display 0.125s ease-out allow-discrete;

        scale: 100%;

        @starting-style {
            scale: 0%;
        }
    }
}