@import "tailwindcss";

/* font files land in public/fonts from nix/pkgs/web-static-files.nix */
@import "../../../web/src/theme.css";
@import "../../../web/src/fonts.css";
@import "../../../web/src/markup.css";

@source "../../../web/src/lib/components/ui";
@source "../../posts";

html {
    color-scheme: light;
    @variant dark {
        color-scheme: dark;
    }
}

@theme {
    /* the docs site's --sl-content-width */
    --container-column: 36rem;
}

@layer base {
    html {
        font-size: 16px;
    }

    body {
        @apply flex min-h-screen flex-col bg-background-canvas typography-paragraph-body text-foreground-default;
        text-wrap-style: pretty;
    }

    a {
        @apply text-foreground-default no-underline decoration-foreground-default decoration-from-font underline-offset-4;
    }

    ::selection {
        background-color: var(--color-background-info-subtle-hover);
        color: var(--color-foreground-default);
    }
}

@layer components {
    .panel {
        @apply rounded-md border border-border-default bg-background-default;
    }

    /* superlogical's masthead: title and subtitle read as one block, the
	   subtitle only greyed */
    .title,
    .lede {
        @apply typography-heading-2;
    }

    .lede {
        @apply text-foreground-placeholder;
    }

    .meta {
        @apply typography-paragraph-regular text-foreground-muted;
    }

    .post {
        @apply text-xl leading-2xl text-foreground-muted;

        a {
            @apply decoration-[0.1rem] hover:decoration-foreground-link-hover;
        }
    }

    .post :is(p, blockquote, ul, ol, pre, table, details) {
        @apply my-lg;
    }

    /* markup.css rules h1 and h2 off like a readme; a post's headings stand alone */
    .post :is(h1, h2, h3, h4, h5, h6) {
        @apply mt-3xl mb-md border-b-0 pb-0;
    }

    .post :is(h1, h2, h3, h4, h5, h6) + * {
        @apply mt-none;
    }

    .post h2 {
        @apply typography-heading-4;
    }

    /* markup.css's h3 and h4 would otherwise sit at or below the body size */
    .post :is(h3, h4, h5, h6) {
        @apply typography-paragraph-large;
    }

    .post pre {
        @apply rounded-md;
    }

    .post > :first-child {
        @apply mt-none;
    }

    .post :is(p, li, dd, blockquote) {
        @apply wrap-break-word;
    }

    .post a {
        @apply text-foreground-default;
    }

    .post figure {
        @apply my-xl;
    }

    .post figcaption {
        @apply mt-xs typography-paragraph-regular text-foreground-subtle;
    }

    .post :is(img, video) {
        @apply rounded-md border border-border-default;
    }

    /* shiki emits both palettes as variables (defaultColor: false) */
    .post pre.astro-code,
    .post pre.astro-code span {
        color: var(--shiki-light);

        @variant dark {
            color: var(--shiki-dark);
        }
    }
}