@import "tailwindcss";


@theme {
    --color-accent: oklch(57.93% 0.258 294.12);
    --color-success: oklch(70.19% 0.158 160.44);
    --color-error: oklch(53% 0.251 28.48);

    --color-base: oklch(11% .007 285);
    --color-surface: oklch(19% 0.007 285.66);
    --color-overlay: oklch(26% 0.008 285.66);

    --color-muted: oklch(63% 0.015 286);
    --color-subtle: oklch(72% 0.015 286);
    --color-text: oklch(87% 0.015 286);

    --color-highlight-sm: oklch(30.67% 0.007 286);
    --color-highlight: oklch(39.26% 0.010 286);
    --color-highlight-lg: oklch(47.72% 0.011 286);
}

@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2") format("woff2");
    font-display: swap;
}

:root {
    --default-font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
    line-height: normal;
    color-scheme: dark;
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    @apply font-semibold;
}

h1 {
    font-size: clamp(42px, 10vw, 64px);
}

h2 {
    font-size: clamp(30px, 6vw, 36px);
}

h3 {
    font-size: 1.25rem;
}

button {
    cursor: pointer;
}

input:not(.search) {
    @apply px-4 py-2 rounded-md w-full bg-surface border border-highlight/70 placeholder:text-highlight text-text focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden;
    
    &[type="file"] {
        @apply p-0 cursor-pointer;

        &::file-selector-button {
            @apply px-2 py-2 mr-1 bg-highlight text-subtle cursor-pointer;
        }
    }
}

.link-card {
    background: var(--color-overlay);
    display: flex;
    flex-direction: row;
    text-decoration: none;
    border-radius: 1rem;
    padding: 0.625rem;
    align-items: center;
    transition-property: box-shadow, transform, translate;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    &:not(.admin) {
        &:hover {
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            transform: translateY(-4px);
        }

        &:active {
            box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transform: translateY(2px);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-card {
        transition: none;

        &:hover {
            transform: none;
        }

        &:active {
            transform: none;
        }
    }
}

/* Div that holds the image */
.link-card div:has(img):first-child {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.link-card div:first-child img {
    user-select: none;
    border-radius: 0.375rem;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Div that holds the text */
.link-card div:nth-child(2) {
    word-break: break-all;
}

.link-card div:nth-child(2) p {
    color: var(--color-subtle);
}