/* anthonyyy.com — base stylesheet.
   Layers, in order: tokens (scales) · reset · type utilities · components ·
   prose. Each theme's palette lives in its own file under themes/ and is
   appended to this sheet when /styles.css is served (see src/themes.ts).

   Rules:
   - components are BEM and never style another component (no `.a .b`);
   - element selectors are only used inside .prose and for the reset;
   - every size, colour, space, line-height, and border references a token. */

/* ---------- fonts ---------- */

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Departure Mono — a pixel/bitmap monospace. The .woff2 files are not vendored;
   drop DepartureMono-Regular.woff2 and DepartureMono-Bold.woff2 into public/fonts
   (from https://departuremono.com) to activate the "departure" theme. Until then
   it falls back to JetBrains Mono. Pixel-perfect at font sizes in 11px steps. */
@font-face {
    font-family: "Departure Mono";
    src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Departure Mono";
    src: url("/fonts/DepartureMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Cascade layers: everything here is `base`; theme files are appended in the
   `theme` layer (see src/themes.ts), so themes always win over base defaults. */
@layer base, theme;

@layer base {
    /* ---------- tokens / scales ---------- */

    /* Shared, theme-independent tokens. Themes (themes/*.css) override the palette
   and may retune the scales. Components consume only these variables. */
    :root {
        /* font families */
        --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
        --font-serif:
            "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, serif;
        --font-mono: "JetBrains Mono", ui-monospace, monospace;
        --font-body: var(--font-sans);
        --font-heading: var(--font-body);
        --font-list-title: var(--font-body);

        /* type-size scale (derived from a base size and a ratio) */
        --size-base: 1.0625rem;
        --scale: 1.22;
        --size-h1: calc(var(--size-base) * pow(var(--scale), 3));
        --size-h2: calc(var(--size-base) * pow(var(--scale), 2));
        --size-h3: calc(var(--size-base) * var(--scale));
        --size-small: calc(var(--size-base) / var(--scale));
        --size-list-title: 1.0625em;
        --size-code: 0.92em;

        /* line-height scale (--leading is the theme-tunable body value) */
        --leading: 1.65;
        --leading-tight: 1.2;
        --leading-snug: 1.32;
        --leading-normal: 1.5;

        /* weights */
        --weight-heading: 300;
        --weight-list-title: 500;
        --weight-strong: 500;

        /* letter-spacing */
        --tracking-heading: -0.017em;
        --tracking-body: 0;

        /* spacing scale */
        --space-unit: 1rem;
        --space-3xs: calc(var(--space-unit) * 0.25);
        --space-2xs: calc(var(--space-unit) * 0.5);
        --space-xs: calc(var(--space-unit) * 0.75);
        --space-sm: var(--space-unit);
        --space-md: calc(var(--space-unit) * 1.5);
        --space-lg: calc(var(--space-unit) * 2);
        --space-xl: calc(var(--space-unit) * 2.5);
        --space-2xl: calc(var(--space-unit) * 3.5);
        --space-3xl: calc(var(--space-unit) * 5);

        /* prose paragraph rhythm (em so it tracks the running text size) */
        --flow: 1.25em;

        /* layout measures */
        --measure: 60em;
        --measure-text: 40em;

        /* borders, radii, decoration */
        --border-width: 1px;
        --border-width-thick: 2px;
        --radius: 4px;
        --underline-weight: 1px;
        --underline-offset: 0.125em;

        /* control padding */
        --control-padding-block: var(--space-2xs);
        --control-padding-inline: var(--space-xs);

        /* theme-picker select */
        --caret-size: 0.36em;
        --select-gutter: 1.1em;
        --picker-icon-size: 0.7em;
        --picker-max-height: 60vh;

        /* syntax highlighting maps to the active theme's palette;
     themes set concrete --syntax-string / --syntax-literal values. */
        --syntax-comment: var(--color-muted);
        --syntax-keyword: var(--color-accent);
        --syntax-name: var(--color-fg);
    }

    /* ---------- reset ---------- */

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

    html {
        background: var(--color-bg);
        color: var(--color-fg);
        font-family: var(--font-body);
        font-size: var(--size-base);
        line-height: var(--leading);
        letter-spacing: var(--tracking-body);
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
    }

    :focus-visible {
        outline: var(--border-width-thick) solid var(--color-accent);
        outline-offset: var(--border-width-thick);
    }

    ::selection {
        background: var(--color-accent);
        color: var(--color-bg);
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ---------- type utilities ----------
   Bundles of font properties that must stay consistent, applied in markup
   alongside a component class. */

    .text-display {
        font-family: var(--font-heading);
        font-size: var(--size-h1);
        font-weight: var(--weight-heading);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-heading);
    }

    .text-title {
        font-family: var(--font-heading);
        font-size: var(--size-h2);
        font-weight: var(--weight-heading);
        line-height: var(--leading-snug);
        letter-spacing: var(--tracking-heading);
    }

    .text-meta {
        font-size: var(--size-small);
        line-height: var(--leading-normal);
        font-variant-numeric: tabular-nums;
    }

    /* ---------- page ---------- */

    .page {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        max-width: var(--measure);
        margin-inline: auto;
        padding: var(--space-xl) var(--space-md) var(--space-3xl);
    }

    .main {
        flex: 1;
    }

    /* ---------- nav ---------- */

    .nav {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2xs) var(--space-md);
        margin-bottom: var(--space-3xl);
    }

    .nav__link {
        color: var(--color-muted);
        text-decoration: none;
    }

    .nav__link:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .nav__link--active {
        color: var(--color-fg);
    }

    .nav__divider {
        color: var(--color-muted);
        user-select: none;
        font-size: var(--size-small);
    }

    /* ---------- post list ---------- */

    .post-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .post-list__item {
        margin-bottom: var(--space-lg);
    }

    .post-list__title {
        color: var(--color-fg);
        font-family: var(--font-list-title);
        font-size: var(--size-list-title);
        font-weight: var(--weight-list-title);
        line-height: var(--leading-snug);
        text-decoration: none;
        overflow-wrap: break-word;
    }

    .post-list__title:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .post-list__url {
        display: block;
        font-size: var(--size-small);
        color: var(--color-muted);
        overflow-wrap: break-word;
    }

    .post-list__url-link {
        color: inherit;
        text-decoration: none;
    }

    .post-list__url-link:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .post-list__date {
        margin-inline-start: var(--space-xs);
        color: var(--color-muted);
        white-space: nowrap;
    }

    .post-list__description {
        max-width: var(--measure-text);
        margin: var(--space-2xs) 0 0;
        color: var(--color-muted);
        line-height: var(--leading);
        overflow-wrap: break-word;
    }

    .post-list__description--link {
        color: var(--color-fg);
    }

    .post-list-empty {
        max-width: var(--measure-text);
        color: var(--color-muted);
    }

    /* ---------- post detail ---------- */

    .post__title {
        margin: 0 0 var(--space-md);
        text-wrap: balance;
        font-weight: var(--weight-heading);
        overflow-wrap: break-word;
    }

    .post__title-icon {
        font-size: 0.7em;
        color: var(--color-muted);
        vertical-align: middle;
    }

    .post__url-block {
        margin: 0 0 var(--space-3xs);
        font-size: var(--size-small);
        line-height: var(--leading-normal);
        color: var(--color-muted);
        overflow-wrap: break-word;
    }

    .post__url {
        color: var(--color-accent);
        font-weight: var(--weight-strong);
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    /* the about and 404 pages have no date between the title and the prose */
    .post__title--standalone {
        margin-bottom: var(--space-lg);
    }

    .post__date {
        display: block;
        margin-bottom: var(--space-lg);
        color: var(--color-muted);
    }

    .post__description {
        max-width: var(--measure-text);
        margin: 0 0 var(--space-md);
    }

    /* ---------- prose (rendered markdown — element styling is intentional) ---------- */

    .prose {
        max-width: var(--measure-text);
    }

    .prose > :first-child {
        margin-top: 0;
    }

    .prose a {
        color: var(--color-accent);
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .prose p,
    .prose ul,
    .prose ol,
    .prose blockquote,
    .prose pre {
        margin-block: 0 var(--flow);
    }

    .prose li {
        margin-block: var(--space-3xs);
    }

    .prose h2,
    .prose h3,
    .prose h4 {
        margin-block: calc(var(--flow) * 1.6) calc(var(--flow) * 0.6);
        font-family: var(--font-heading);
        font-weight: var(--weight-heading);
        line-height: var(--leading-snug);
        letter-spacing: var(--tracking-heading);
        text-wrap: balance;
    }

    .prose h2 {
        font-size: var(--size-h2);
    }

    .prose h3 {
        font-size: var(--size-h3);
    }

    .prose h4 {
        font-size: var(--size-base);
    }

    .prose blockquote {
        margin-inline: 0;
        padding-inline-start: var(--space-sm);
        border-inline-start: var(--border-width-thick) solid var(--color-rule);
        color: var(--color-muted);
        font-style: var(--quote-style, normal);
    }

    .prose code {
        font-family: var(--font-mono);
        font-size: var(--size-code);
    }

    .prose :not(pre) > code {
        padding: 0 var(--space-3xs);
        border-radius: calc(var(--radius) * 0.75);
        background: color-mix(in srgb, var(--color-fg) 7%, transparent);
    }

    .prose pre {
        padding: var(--space-sm) var(--space-md);
        border: var(--border-width) solid var(--color-rule);
        border-radius: var(--radius);
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: var(--size-code);
        line-height: var(--leading-normal);
    }

    .prose hr {
        margin-block: calc(var(--flow) * 2);
        border: 0;
        border-top: var(--border-width) solid var(--color-rule);
    }

    .prose img {
        max-width: 100%;
    }

    /* syntax tokens (Prism output, inside .prose) */
    .prose .token.comment,
    .prose .token.prolog,
    .prose .token.cdata {
        color: var(--syntax-comment);
        font-style: italic;
    }

    .prose .token.keyword,
    .prose .token.atrule,
    .prose .token.rule,
    .prose .token.important,
    .prose .token.tag {
        color: var(--syntax-keyword);
    }

    .prose .token.string,
    .prose .token.char,
    .prose .token.attr-value,
    .prose .token.template-string,
    .prose .token.regex,
    .prose .token.inserted {
        color: var(--syntax-string);
    }

    .prose .token.number,
    .prose .token.boolean,
    .prose .token.constant,
    .prose .token.symbol,
    .prose .token.builtin,
    .prose .token.attr-name,
    .prose .token.property,
    .prose .token.deleted {
        color: var(--syntax-literal);
    }

    .prose .token.function,
    .prose .token.class-name,
    .prose .token.selector {
        color: var(--syntax-name);
    }

    .prose .token.operator,
    .prose .token.punctuation {
        color: var(--color-muted);
    }

    /* ---------- forms ---------- */

    .form {
        max-width: var(--measure-text);
    }

    .form__field {
        margin-bottom: var(--space-sm);
    }

    .form__label {
        display: block;
        margin-bottom: var(--space-3xs);
        color: var(--color-muted);
        font-size: var(--size-small);
    }

    .form__input,
    .form__textarea {
        width: 100%;
        padding: var(--control-padding-block) var(--control-padding-inline);
        border: var(--border-width) solid var(--color-rule);
        border-radius: var(--radius);
        background: transparent;
        color: var(--color-fg);
        font: inherit;
    }

    .form__textarea {
        resize: vertical;
    }

    .form__input:focus-visible,
    .form__textarea:focus-visible {
        outline: var(--border-width-thick) solid var(--color-accent);
        outline-offset: var(--border-width);
    }

    .form__input--date {
        width: auto;
        min-width: 12em;
    }

    .form__textarea--body {
        font-family: var(--font-mono);
        line-height: var(--leading-normal);
    }

    .form__actions {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        margin-top: var(--space-md);
    }

    .form__button {
        padding: var(--control-padding-block) var(--space-md);
        border: var(--border-width) solid var(--color-fg);
        border-radius: var(--radius);
        background: var(--color-fg);
        color: var(--color-bg);
        font: inherit;
        cursor: pointer;
    }

    .form__button:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
    }

    .form__cancel {
        color: var(--color-muted);
        font-size: var(--size-small);
        text-decoration: none;
    }

    .form__cancel:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .form__error {
        color: var(--color-danger);
    }

    .form__url-row {
        display: flex;
        gap: var(--space-2xs);
    }

    .form__url-row .form__input {
        flex: 1;
    }

    .form__fetch-btn {
        flex-shrink: 0;
        padding: var(--control-padding-block) var(--control-padding-inline);
        border: var(--border-width) solid var(--color-rule);
        border-radius: var(--radius);
        background: transparent;
        color: var(--color-muted);
        font: inherit;
        cursor: pointer;
    }

    .form__fetch-btn:hover:not(:disabled) {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }

    .form__fetch-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

    /* ---------- admin ---------- */

    .admin__header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-2xs) var(--space-md);
        margin-bottom: var(--space-xl);
        padding-bottom: var(--space-sm);
        border-bottom: var(--border-width) solid var(--color-rule);
    }

    .admin__title {
        margin: 0;
    }

    .admin__title--solo {
        margin-bottom: var(--space-lg);
    }

    .admin__nav {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-sm);
        font-size: var(--size-small);
    }

    .admin__nav-link {
        color: var(--color-muted);
        text-decoration: none;
    }

    .admin__nav-link:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .admin__nav-link--active {
        color: var(--color-fg);
    }

    .admin__logout-button {
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-muted);
        font: inherit;
        cursor: pointer;
    }

    .admin__logout-button:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .admin-empty {
        color: var(--color-muted);
    }

    .admin-empty a {
        color: var(--color-accent);
    }

    .admin-table-wrap {
        overflow-x: auto;
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
        font-variant-numeric: tabular-nums;
    }

    .admin-table__head {
        padding: 0 var(--space-sm) var(--space-2xs) 0;
        border-bottom: var(--border-width) solid var(--color-rule);
        color: var(--color-muted);
        font-size: var(--size-small);
        font-weight: 400;
        text-align: start;
    }

    .admin-table__cell {
        padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
        border-bottom: var(--border-width) solid var(--color-rule);
        text-align: start;
        vertical-align: baseline;
    }

    .admin-table__head--date,
    .admin-table__cell--date {
        color: var(--color-muted);
        white-space: nowrap;
    }

    .admin-table__cell--actions {
        width: 1%;
        white-space: nowrap;
        text-align: end;
    }

    .admin-table__type {
        color: var(--color-muted);
        font-size: var(--size-small);
    }

    .admin-table__title {
        color: var(--color-fg);
        text-decoration: none;
    }

    .admin-table__title:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .admin-table__delete {
        display: inline;
        margin-inline-start: var(--space-sm);
    }

    .admin-table__action {
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-muted);
        font: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    .admin-table__action:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .admin-table__action--danger:hover {
        color: var(--color-danger);
    }

    /* ---------- home: view-all + layout switcher ---------- */

    .view-all {
        display: inline-block;
        margin-block-start: var(--space-xl);
        color: var(--color-muted);
        font-size: var(--size-small);
        text-decoration: none;
    }

    .view-all:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .home__spacer {
        margin-block: var(--space-3xl);
    }

    .home__divider {
        border: none;
        margin: var(--space-xl) 0;
        width: 50px;
    }

    .home__section-title {
        margin: 0 0 var(--space-xl);
        color: var(--color-muted);
        font-size: var(--size-base);
        font-weight: 400;
    }

    .switcher {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-block-end: var(--space-xl);
        color: var(--color-muted);
        font-size: var(--size-small);
    }

    .switcher__link {
        color: var(--color-muted);
    }

    .switcher__current {
        color: var(--color-fg);
    }

    /* ---------- feed (layout 3: date column + title/excerpt) ---------- */

    .feed {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .feed__item {
        display: grid;
        grid-template-columns: minmax(5rem, 7rem) 1fr;
        gap: var(--space-md);
        padding-block: var(--space-md);
    }

    .feed__item + .feed__item {
        border-block-start: var(--border-width) solid var(--color-rule);
    }

    .feed__date {
        color: var(--color-muted);
        font-size: var(--size-small);
        font-variant-numeric: tabular-nums;
        line-height: var(--leading-snug);
        padding-block-start: var(--space-3xs);
        white-space: nowrap;
    }

    .feed__title {
        color: var(--color-fg);
        font-family: var(--font-list-title);
        font-size: var(--size-list-title);
        font-weight: var(--weight-list-title);
        line-height: var(--leading-snug);
        text-decoration: none;
        overflow-wrap: break-word;
    }

    .feed__title:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .feed__url {
        display: block;
        font-size: var(--size-small);
        color: var(--color-muted);
        overflow-wrap: break-word;
    }

    .feed__url-link {
        color: inherit;
        text-decoration: none;
    }

    .feed__url-link:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .feed__excerpt {
        max-width: var(--measure-text);
        margin: var(--space-2xs) 0 0;
        color: var(--color-muted);
        line-height: var(--leading);
    }

    /* ---------- theme control (last nav item) ----------
   A select styled to read as the theme name + a caret. JavaScript switches
   instantly on change; the <noscript> submit is the no-JS fallback. */

    .theme-nav {
        display: inline-flex;
        align-items: baseline;
        gap: var(--space-2xs);
        margin-inline-start: 0;
    }

    .theme-nav__field {
        position: relative;
    }

    .theme-nav__select {
        color: var(--color-muted);
        font: inherit;
        text-decoration: none;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    .theme-nav__select:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--underline-weight);
        text-underline-offset: var(--underline-offset);
    }

    .theme-nav__go {
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-muted);
        font: inherit;
        cursor: pointer;
    }

    .theme-nav__go:hover {
        color: var(--color-accent);
    }

    /* Progressive enhancement: where the browser supports the customizable
   <select> (Chromium ≥135), style the popup to match the theme. Firefox
   ignores this block and falls back to the native popup above. */
    @supports (appearance: base-select) {
        .theme-nav__select {
            appearance: base-select;
        }
    }
    /* end @layer base */
}

@layer theme {
/*
name: default
order: 1
*/
[data-theme="default"] {
  --color-bg: #ffffff;
  --color-fg: #1a1a1a;
  --color-muted: #6f6f6f;
  --color-accent: #0a58c2;
  --color-rule: #e6e6e6;
  --color-danger: #c0392b;

  --syntax-string: #2f7d3b;
  --syntax-literal: #8250df;

  color-scheme: light;
}
}
@layer theme {
/*
name: dark
order: 2
*/
/* The default palette at night — colours change, metrics don't. */
[data-theme="dark"] {
  --color-bg: #101014;
  --color-fg: #e6e6e6;
  --color-muted: #8b8b94;
  --color-accent: #8ab4f8;
  --color-rule: #26262e;
  --color-danger: #f0857f;

  --syntax-string: #9ecb88;
  --syntax-literal: #d8a657;

  color-scheme: dark;
}
}
@layer theme {
/*
name: paper
order: 3
*/
/* Warm serif, a slightly grander scale, airier rhythm. */
[data-theme="paper"] {
  --color-bg: #f7f2e7;
  --color-fg: #2b2620;
  --color-muted: #877d6e;
  --color-accent: #8a3324;
  --color-rule: #e3dac7;
  --color-danger: #9c3327;

  --font-body: var(--font-serif);
  /* the serif runs optically small next to a sans — compensate. */
  --size-base: 1.125rem;
  --scale: 1.25;
  --space-unit: 1.125rem;
  --leading: 1.75;
  --flow: 1.4em;
  --weight-heading: 400;
  --tracking-heading: 0;
  --quote-style: italic;

  --syntax-string: #5a7d3a;
  --syntax-literal: #9c5a3c;

  color-scheme: light;
}
}
@layer theme {
/*
name: terminal
order: 4
*/
/* Phosphor mono — flat hierarchy, dense spacing, square corners. */
[data-theme="terminal"] {
  --color-bg: #0a0f0a;
  --color-fg: #9ee493;
  --color-muted: #5e8c58;
  --color-accent: #d6f599;
  --color-rule: #1d2b1c;
  --color-danger: #e07a5f;

  --font-body: var(--font-mono);
  --size-base: 0.9375rem;
  --scale: 1.1;
  --space-unit: 0.875rem;
  --leading: 1.7;
  --weight-heading: 700;
  --tracking-heading: 0;
  --weight-list-title: 700;
  --radius: 0;

  --syntax-string: #c9f2c0;
  --syntax-literal: #e8ffd6;
  --syntax-name: #b5e8a9;

  color-scheme: dark;
}
}
@layer theme {
/*
name: loud
order: 5
*/
/* Big type, hot accent, thick underlines, hard corners. */
[data-theme="loud"] {
  --color-bg: #f4f1ec;
  --color-fg: #111111;
  --color-muted: #6e6a63;
  --color-accent: #ff3b00;
  --color-rule: #ddd8cf;
  --color-danger: #cc1100;

  --size-base: 1.125rem;
  --scale: 1.45;
  --space-unit: 1.2rem;
  --leading: 1.6;
  --weight-heading: 700;
  --tracking-heading: -0.025em;

  --size-list-title: 1.1em;
  --weight-list-title: 700;
  --font-list-title: var(--font-heading);

  --radius: 0;
  --underline-weight: 2px;

  --syntax-string: #0a7d4d;
  --syntax-literal: #5546d6;

  color-scheme: light;
}
}
@layer theme {
/*
name: departure
order: 6
*/
/* Lo-fi pixel mono on a console-dark palette. Sizes step on an 11px grid (the
   font's pixel size) for the crispest rendering; the half-step 16.5px body
   keeps long reads comfortable. Sizes are set directly to stay on grid. */
[data-theme="departure"] {
  --color-bg: #12131c;
  --color-fg: #cdd2e0;
  --color-muted: #6d728a;
  --color-accent: #ffb454;
  --color-rule: #262838;
  --color-danger: #ff6b6b;

  --font-body: "Departure Mono", var(--font-mono);
  --font-heading: var(--font-body);

  --size-base: 16.5px;
  --size-h1: 33px;
  --size-h2: 27.5px;
  --size-h3: 22px;
  --size-small: 11px;

  --space-unit: 1.1rem;
  --leading: 1.55;
  --flow: 1.4em;
  --weight-heading: 700;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --weight-list-title: 700;
  --radius: 0;

  --syntax-comment: #6d728a;
  --syntax-keyword: #ffb454;
  --syntax-string: #b7c08f;
  --syntax-literal: #ff9e64;
  --syntax-name: #cdd2e0;

  color-scheme: dark;
}
}
@layer theme {
/*
name: rosé pine
order: 7
*/
[data-theme="rose-pine"] {
  --color-bg: #191724;
  --color-fg: #e0def4;
  --color-muted: #6e6a86;
  --color-accent: #ebbcba;
  --color-rule: #26233a;
  --color-danger: #eb6f92;

  --syntax-comment: #6e6a86;
  --syntax-keyword: #c4a7e7;
  --syntax-string: #9ccfd8;
  --syntax-literal: #f6c177;
  --syntax-name: #ebbcba;

  color-scheme: dark;
}
}
@layer theme {
/*
name: tokyo night
order: 8
*/
[data-theme="tokyo-night"] {
  --color-bg: #1a1b26;
  --color-fg: #c0caf5;
  --color-muted: #565f89;
  --color-accent: #7aa2f7;
  --color-rule: #24283b;
  --color-danger: #f7768e;

  --syntax-comment: #565f89;
  --syntax-keyword: #bb9af7;
  --syntax-string: #9ece6a;
  --syntax-literal: #ff9e64;
  --syntax-name: #7dcfff;

  color-scheme: dark;
}
}
@layer theme {
/*
name: ayu dark
order: 9
*/
[data-theme="ayu"] {
  --color-bg: #0f1419;
  --color-fg: #bfbdb6;
  --color-muted: #5c6773;
  --color-accent: #ffb454;
  --color-rule: #1f2430;
  --color-danger: #f07178;

  --syntax-comment: #5c6773;
  --syntax-keyword: #ff8f40;
  --syntax-string: #aad94c;
  --syntax-literal: #d2a6ff;
  --syntax-name: #59c2ff;

  color-scheme: dark;
}
}
@layer theme {
/*
name: greyscale light
order: 10
*/
[data-theme="greyscale-light"] {
  --color-bg: #f5f5f5;
  --color-fg: #2a2a2a;
  --color-muted: #767676;
  --color-accent: #555555;
  --color-rule: #dcdcdc;
  --color-danger: #8a3a3a;

  --syntax-comment: #999999;
  --syntax-keyword: #1a1a1a;
  --syntax-string: #555555;
  --syntax-literal: #333333;
  --syntax-name: #000000;

  color-scheme: light;
}
}
@layer theme {
/*
name: greyscale dark
order: 11
*/
[data-theme="greyscale-dark"] {
  --color-bg: #1a1a1a;
  --color-fg: #c8c8c8;
  --color-muted: #707070;
  --color-accent: #a6a6a6;
  --color-rule: #2c2c2c;
  --color-danger: #c08a8a;

  --syntax-comment: #707070;
  --syntax-keyword: #e0e0e0;
  --syntax-string: #a6a6a6;
  --syntax-literal: #cccccc;
  --syntax-name: #ffffff;

  color-scheme: dark;
}
}