/* ═══ plmail.dev ═════════════════════════════════════════════════════════════
   The site's stylesheet, deliberately hand-written and deliberately small.

   The default palette below is the app's own light theme, copied:
   assets/styles/app.css is a Tailwind entrypoint full of @variant and @layer
   directives a browser cannot read on its own, so importing it is not an
   option, and extracting nine colours through a build step would be more
   machinery than nine colours are worth.

   **The seven named themes are NOT copied.** They are appended to this file at
   build time from App\Domain\Enum\Theme\Theme::swatch(), which is the same
   source the app's own appearance picker reads — see bin/build-site.php. So
   adding a theme to plMail adds it to the site, and the two cannot end up
   offering different lists.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --rgb-surface:      255 255 255;
    --rgb-sunken:       243 244 246;
    --rgb-line:           0   0   0;
    --rgb-ink:           39  39  42;
    --rgb-ink-soft:      55  65  81;
    --rgb-ink-muted:    113 113 122;
    --rgb-ink-faint:    161 161 170;
    --rgb-accent:        37  99 235;
    --rgb-accent-ink:   255 255 255;

    --line-alpha: 0.12;

    --sidebar: 17rem;
    --measure: 46rem;
}

/* "System" is the ABSENCE of data-theme, so this is what makes that setting
   mean anything at all — without it, System was light on every machine, which
   is a switcher option that silently does nothing. :not([data-theme]) is
   load-bearing: an explicit choice must out-rank the operating system's, and a
   bare :root here would out-rank Solar on a dark-mode laptop. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --rgb-surface:       17  24  39;
        --rgb-sunken:        31  41  55;
        --rgb-line:         255 255 255;
        --rgb-ink:          243 244 246;
        --rgb-ink-soft:     209 213 219;
        --rgb-ink-muted:    156 163 175;
        --rgb-ink-faint:    107 114 128;
        --rgb-accent:       147 197 253;
        --rgb-accent-ink:    17  24  39;

        --line-alpha: 0.18;
    }
}

:root[data-theme="dark"] {
    --rgb-surface:       17  24  39;
    --rgb-sunken:        31  41  55;
    --rgb-line:         255 255 255;
    --rgb-ink:          243 244 246;
    --rgb-ink-soft:     209 213 219;
    --rgb-ink-muted:    156 163 175;
    --rgb-ink-faint:    107 114 128;
    --rgb-accent:       147 197 253;
    --rgb-accent-ink:    17  24  39;

    --line-alpha: 0.18;
}

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

body {
    margin: 0;
    background: rgb(var(--rgb-surface));
    color: rgb(var(--rgb-ink));
    font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: rgb(var(--rgb-accent)); text-decoration-thickness: 1px; text-underline-offset: 2px; }

code, pre, kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875em;
}

/* Visible only when tabbed to — the first stop for a keyboard visitor, and the
   one piece of chrome that must never be merely decorative. */
.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 1rem; top: 1rem; z-index: 100;
    padding: 0.5rem 0.75rem; border-radius: 0.5rem;
    background: rgb(var(--rgb-accent)); color: rgb(var(--rgb-accent-ink));
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.65rem 1.25rem;
    background: rgb(var(--rgb-surface) / 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
}

.brand { font-weight: 650; color: rgb(var(--rgb-ink)); text-decoration: none; letter-spacing: -0.01em; }

.topbar-links { display: flex; gap: 1rem; font-size: 0.9rem; }
.topbar-links a { color: rgb(var(--rgb-ink-muted)); text-decoration: none; }
.topbar-links a:hover { color: rgb(var(--rgb-ink)); }

.search { position: relative; margin-left: auto; }

.search input {
    width: 15rem; max-width: 40vw;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    border-radius: 0.5rem;
    background: rgb(var(--rgb-sunken));
    color: inherit; font: inherit; font-size: 0.9rem;
}
.search input:focus { outline: 2px solid rgb(var(--rgb-accent) / 0.5); outline-offset: 1px; }

#results {
    position: absolute; right: 0; top: calc(100% + 0.4rem);
    width: 26rem; max-width: 80vw; max-height: 60vh; overflow-y: auto;
    margin: 0; padding: 0.3rem; list-style: none;
    background: rgb(var(--rgb-surface));
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    border-radius: 0.6rem;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
}
#results li a { display: block; padding: 0.45rem 0.6rem; border-radius: 0.4rem; text-decoration: none; }
#results li a:hover, #results li a:focus { background: rgb(var(--rgb-accent) / 0.12); }
#results strong { display: block; color: rgb(var(--rgb-ink)); font-size: 0.9rem; }
#results span { color: rgb(var(--rgb-ink-muted)); font-size: 0.8rem; }

/* ── Hero, landing only ──────────────────────────────────────────────────── */

.hero {
    padding: 5rem 1.25rem 3.5rem;
    background:
        radial-gradient(60rem 22rem at 50% -8rem, rgb(var(--rgb-accent) / 0.14), transparent 70%),
        rgb(var(--rgb-sunken) / 0.5);
    border-bottom: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    text-align: center;
}
.hero-inner { max-width: 46rem; margin: 0 auto; }
.hero-eyebrow {
    margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.09em;
    font-size: 0.75rem; font-weight: 600; color: rgb(var(--rgb-accent));
}
.hero-title { margin: 0; font-size: clamp(2.75rem, 8vw, 4.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.hero-lead { margin: 1rem auto 2rem; max-width: 34rem; font-size: 1.15rem; color: rgb(var(--rgb-ink-soft)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0; }

.button {
    display: inline-block; padding: 0.6rem 1.1rem;
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    border-radius: 0.6rem; text-decoration: none;
    color: rgb(var(--rgb-ink)); background: rgb(var(--rgb-surface));
    font-size: 0.95rem; font-weight: 550;
}
.button:hover { border-color: rgb(var(--rgb-accent) / 0.5); }
.button-primary { background: rgb(var(--rgb-accent)); border-color: transparent; color: rgb(var(--rgb-accent-ink)); }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.layout { display: flex; gap: 2.5rem; align-items: flex-start; max-width: 78rem; margin: 0 auto; padding: 0 1.25rem; }

.sidebar {
    position: sticky; top: 3.6rem;
    flex: 0 0 var(--sidebar); width: var(--sidebar);
    max-height: calc(100vh - 3.6rem); overflow-y: auto;
    padding: 2rem 0 3rem;
    font-size: 0.9rem;
}
.sidebar-heading {
    margin: 1.5rem 0 0.4rem; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--rgb-ink-faint));
}
.sidebar ul { margin: 0; padding: 0; list-style: none; }
.sidebar li a {
    display: block; padding: 0.25rem 0.6rem; margin-left: -0.6rem;
    border-radius: 0.4rem; color: rgb(var(--rgb-ink-soft)); text-decoration: none;
}
.sidebar li a:hover { background: rgb(var(--rgb-line) / 0.06); color: rgb(var(--rgb-ink)); }
.sidebar li a[aria-current="page"] { background: rgb(var(--rgb-accent) / 0.12); color: rgb(var(--rgb-accent)); font-weight: 600; }

main { min-width: 0; flex: 1; padding: 2rem 0 5rem; }
.is-landing main { max-width: 52rem; margin: 0 auto; }

/* ── Prose ───────────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.is-landing .prose { max-width: none; }

.prose h1 { font-size: 2rem; letter-spacing: -0.02em; margin: 2rem 0 1rem; line-height: 1.2; }
.prose h2 {
    font-size: 1.4rem; letter-spacing: -0.01em; margin: 2.75rem 0 0.85rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
}
.prose h3 { font-size: 1.1rem; margin: 2rem 0 0.6rem; }
.prose p, .prose li { color: rgb(var(--rgb-ink-soft)); }
.prose li { margin: 0.3rem 0; }
.prose strong { color: rgb(var(--rgb-ink)); font-weight: 650; }

.prose code {
    padding: 0.12em 0.36em; border-radius: 0.3rem;
    background: rgb(var(--rgb-line) / 0.07);
}

/* Inline code only — `:not(pre) >` matters. A long unbreakable token, and this
   handbook is full of them (URLs, scope strings, `urn:plmail:params:jmap:…`),
   has nowhere to go inline and pushes the whole page sideways: seven pixels of
   overflow on a 320px phone, from one address in one paragraph. Inside a <pre>
   the same token must NOT break — the block scrolls instead, because a wrapped
   shell command is a command somebody pastes wrong. */
.prose :not(pre) > code { overflow-wrap: anywhere; }

/* And the prose around it, for a bare URL nobody wrapped in backticks. */
.prose p, .prose li { overflow-wrap: break-word; }
.prose pre {
    padding: 0.9rem 1.1rem; border-radius: 0.6rem; overflow-x: auto;
    background: rgb(var(--rgb-sunken));
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
}
.prose pre code { padding: 0; background: none; }

.prose blockquote {
    margin: 1.25rem 0; padding: 0.1rem 1rem;
    border-left: 3px solid rgb(var(--rgb-accent) / 0.4);
    color: rgb(var(--rgb-ink-muted));
}

/* Tables are how half the handbook is written, and several are wider than the
   measure. Scrolled inside their own box rather than allowed to widen the page,
   which on a phone would scroll the whole document sideways. */
.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.prose th, .prose td {
    padding: 0.5rem 0.7rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
}
.prose th { color: rgb(var(--rgb-ink)); font-weight: 650; white-space: nowrap; }

.prose img {
    max-width: 100%; height: auto; border-radius: 0.6rem;
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
}

.prose hr { border: 0; border-top: 1px solid rgb(var(--rgb-line) / var(--line-alpha)); margin: 2.5rem 0; }

.anchor { margin-left: 0.4rem; color: rgb(var(--rgb-ink-faint)); text-decoration: none; opacity: 0; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor { opacity: 1; }

.page-footer {
    margin-top: 4rem; padding-top: 1.25rem;
    border-top: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    font-size: 0.85rem; color: rgb(var(--rgb-ink-faint));
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */

/* ── The two pickers ─────────────────────────────────────────────────────────
   Native <select>s rather than a custom menu. They carry seven and two options,
   they must work before site.js has loaded, and a hand-built dropdown would be
   the one thing on this site with keyboard behaviour to get wrong. */

.pickers { display: flex; gap: 0.4rem; }

.picker { display: flex; align-items: center; }

/* Off-screen, not display:none: the <select> still needs its accessible name,
   and a screen reader announcing "Theme" is the whole point of the element. */
.picker-label { position: absolute; left: -9999px; }

.picker select {
    appearance: none;
    padding: 0.32rem 1.5rem 0.32rem 0.6rem;
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    border-radius: 0.5rem;
    background-color: transparent;
    /* The chevron, as a data URI so the site stays one CSS file and no
       request. currentColor cannot be used inside a data URI, hence the fixed
       grey — it reads acceptably on every one of the seven palettes. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 0.85rem;
    color: rgb(var(--rgb-ink-soft));
    font: inherit; font-size: 0.85rem;
    cursor: pointer;
}
.picker select:focus-visible { outline: 2px solid rgb(var(--rgb-accent) / 0.5); outline-offset: 1px; }
.picker select option { background: rgb(var(--rgb-surface)); color: rgb(var(--rgb-ink)); }
.picker select option:disabled { color: rgb(var(--rgb-ink-faint)); }

/* Shown on a page a translation has not reached yet. Deliberately quiet: it is
   an apology, not a warning, and the page below it is perfectly usable. */
.fallback-notice {
    margin: 0 0 1.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    border-radius: 0.5rem;
    background: rgb(var(--rgb-sunken));
    color: rgb(var(--rgb-ink-muted));
    font-size: 0.875rem;
}

/* ── The burger ──────────────────────────────────────────────────────────────
   Hidden above the breakpoint, where the sidebar is always on screen. */

.burger {
    display: none;
    flex-direction: column; justify-content: center; gap: 4px;
    width: 2.25rem; height: 2.25rem;
    padding: 0 0.4rem; margin-left: -0.4rem;
    border: 0; background: none; cursor: pointer;
}
.burger span {
    display: block; height: 2px; border-radius: 1px;
    background: rgb(var(--rgb-ink));
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* Into a cross while the menu is open, so the control says what pressing it
   again will do. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.scrim { display: none; }

/* ── Narrow ──────────────────────────────────────────────────────────────────

   The sidebar used to become a full-width block ABOVE the content here, which
   on a phone meant scrolling past thirty-four links to reach the first
   paragraph of every page. It is a drawer now, and the burger is what opens it.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 60rem) {
    .burger { display: flex; }
    .topbar-links { display: none; }
    .topbar { gap: 0.6rem; padding: 0.55rem 0.9rem; }
    .hero { padding: 3.5rem 1.25rem 2.5rem; }

    /* align-items has to be reset with the direction. `flex-start` is what
       keeps the sidebar from stretching to the article's height in the ROW
       layout above — but in a column it stops meaning "top" and starts meaning
       "as wide as your content", so <main> sized itself to its widest
       unbreakable line and the landing page came out 1331px wide inside a
       393px phone. The handbook hid it: .prose caps at 46rem there, which is
       wrong by less. */
    .layout { flex-direction: column; align-items: stretch; gap: 0; padding: 0 1rem; }

    /* And a hard ceiling regardless, because the failure above was silent and
       is the expensive kind: a page that scrolls sideways looks broken before
       a single word of it is read. */
    main, .is-landing main, .prose, .is-landing .prose { max-width: 100%; }

    .sidebar {
        position: fixed; inset: 3.1rem auto 0 0; z-index: 30;
        width: min(19rem, 82vw); max-height: none; height: calc(100dvh - 3.1rem);
        overflow-y: auto;
        padding: 0.75rem 1.1rem 3rem;
        background: rgb(var(--rgb-surface));
        border-right: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
        box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
        /* Off-canvas rather than display:none, so opening it animates and so
           the links stay in the accessibility tree in a predictable order.
           visibility keeps them out of the tab order while it is shut. */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0.2s;
    }
    .sidebar.is-open { transform: none; visibility: visible; }

    /* Tap anywhere else to close — the gesture people try before hunting for
       the button again. */
    .scrim {
        display: block; position: fixed; inset: 3.1rem 0 0 0; z-index: 25;
        background: rgb(0 0 0 / 0.35);
        opacity: 0; pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .scrim.is-open { opacity: 1; pointer-events: auto; }

    main { padding: 1.25rem 0 4rem; }

    /* Bigger tap targets in the drawer than the pointer version needs. */
    .sidebar li a { padding: 0.5rem 0.6rem; }

    /* 16px is not a style choice. Safari zooms the whole page to focus any
       input smaller than that, which is the "why did my phone zoom in" the
       viewport meta gets blamed for and cannot fix — it ignores
       user-scalable=no. */
    .search input { font-size: 16px; width: 100%; max-width: none; }
    .search { margin-left: auto; flex: 1; min-width: 0; }
    #results { width: calc(100vw - 1.8rem); right: -0.4rem; }

    /* Both pickers stay. This hid the language one on the grounds that there
       was only one usable language — which stopped being true the moment the
       German handbook landed, and a German speaker on a phone is precisely the
       person who needs it. They are made narrower instead, and the search box
       gives up the width. */
    .picker select {
        padding: 0.3rem 1.25rem 0.3rem 0.45rem;
        font-size: 0.8rem;
        background-position: right 0.3rem center;
        background-size: 0.75rem;
    }

    .prose h1 { font-size: 1.7rem; }
    .prose h2 { font-size: 1.25rem; }
    .hero-title { font-size: clamp(2.25rem, 12vw, 3rem); }
}

/* Phones, as opposed to small tablets.

   Both pickers used to fight the search box for room here — with four controls
   across 375px the search collapsed to 24 pixels — and one of them was hidden
   to settle it. They are in the drawer now, so the bar holds a burger, a
   wordmark and a search box, and there is nothing left to ration. */
@media (max-width: 26rem) {
    .brand { font-size: 0.95rem; }
    .topbar { gap: 0.45rem; }
}

/* The pickers once site.js has moved them into the drawer. Laid out as a footer
   for the navigation rather than as a toolbar: they are settings, and the links
   above them are the reason the drawer was opened. */
.pickers-drawer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--rgb-line) / var(--line-alpha));
    flex-direction: column; gap: 0.5rem;
}
.pickers-drawer .picker { width: 100%; }
.pickers-drawer .picker-label {
    position: static; left: auto;
    margin-right: auto;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: rgb(var(--rgb-ink-faint));
}
.pickers-drawer select { flex: 0 0 9rem; font-size: 0.9rem; padding: 0.4rem 1.5rem 0.4rem 0.6rem; }

/* The landing page's drawer.

   It carries the same navigation but is hidden above the breakpoint: a front
   page has no business showing a docs sidebar beside its hero. Below it, the
   drawer is the only way off the page — .topbar-links are hidden at that width
   — so it appears exactly where it is needed and nowhere else.

   Scoped to a min-width query rather than left to source order. Written as a
   plain rule it sat after the narrow block, matched at every width and won on
   order, so the landing page had a burger in the markup that nothing could
   ever click. */
@media (min-width: 60.01rem) {
    .is-landing .sidebar,
    .is-landing .burger { display: none; }
}

/* The bar's own links, repeated at the top of the drawer because they are
   hidden from the bar on a phone. */
.drawer-links a { font-weight: 550; }

/* Nothing may ever pan the page sideways. `clip` rather than `hidden`: hidden
   makes the element a scroll container, which silently breaks the sticky top
   bar — the fix would have cost the thing it was protecting. */
body { overflow-x: clip; }

/* ═══ Generated from App\Domain\Enum\Theme\Theme::swatch() — do not edit here. ═══ */

:root[data-theme="light"] {
    --rgb-surface:   255 255 255;
    --rgb-sunken:    244 244 244;
    --rgb-line:      39 39 42;
    --rgb-ink:       39 39 42;
    --rgb-ink-soft:  82 82 85;
    --rgb-ink-muted: 125 125 127;
    --rgb-ink-faint: 164 164 166;
    --rgb-accent:    37 99 235;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="paper"] {
    --rgb-surface:   247 245 239;
    --rgb-sunken:    236 234 229;
    --rgb-line:      35 34 32;
    --rgb-ink:       35 34 32;
    --rgb-ink-soft:  77 76 73;
    --rgb-ink-muted: 120 118 115;
    --rgb-ink-faint: 158 156 152;
    --rgb-accent:    125 107 79;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="dark"] {
    --rgb-surface:   28 27 26;
    --rgb-sunken:    37 36 35;
    --rgb-line:      214 209 202;
    --rgb-ink:       214 209 202;
    --rgb-ink-soft:  177 173 167;
    --rgb-ink-muted: 140 136 132;
    --rgb-ink-faint: 106 103 100;
    --rgb-accent:    58 111 92;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.18;
}

:root[data-theme="nord"] {
    --rgb-surface:   46 52 64;
    --rgb-sunken:    56 61 73;
    --rgb-line:      236 239 244;
    --rgb-ink:       236 239 244;
    --rgb-ink-soft:  198 202 208;
    --rgb-ink-muted: 160 164 172;
    --rgb-ink-faint: 126 131 140;
    --rgb-accent:    136 192 208;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.18;
}

:root[data-theme="dusk"] {
    --rgb-surface:   30 27 46;
    --rgb-sunken:    40 37 56;
    --rgb-line:      237 233 254;
    --rgb-ink:       237 233 254;
    --rgb-ink-soft:  196 192 212;
    --rgb-ink-muted: 154 151 171;
    --rgb-ink-faint: 117 114 133;
    --rgb-accent:    167 139 250;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.18;
}

:root[data-theme="solar"] {
    --rgb-surface:   253 246 227;
    --rgb-sunken:    245 239 222;
    --rgb-line:      88 110 117;
    --rgb-ink:       88 110 117;
    --rgb-ink-soft:  121 137 139;
    --rgb-ink-muted: 154 164 161;
    --rgb-ink-faint: 184 189 181;
    --rgb-accent:    181 137 0;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="product-blue"] {
    --rgb-surface:   245 248 252;
    --rgb-sunken:    238 244 252;
    --rgb-line:      96 165 250;
    --rgb-ink:       96 165 250;
    --rgb-ink-soft:  126 182 250;
    --rgb-ink-muted: 156 198 251;
    --rgb-ink-faint: 182 213 251;
    --rgb-accent:    37 99 235;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="ink"] {
    --rgb-surface:   33 30 26;
    --rgb-sunken:    38 35 31;
    --rgb-line:      138 132 122;
    --rgb-ink:       138 132 122;
    --rgb-ink-soft:  117 112 103;
    --rgb-ink-muted: 96 91 84;
    --rgb-ink-faint: 77 73 66;
    --rgb-accent:    232 226 217;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.18;
}

:root[data-theme="slate"] {
    --rgb-surface:   242 244 246;
    --rgb-sunken:    237 240 243;
    --rgb-line:      148 163 184;
    --rgb-ink:       148 163 184;
    --rgb-ink-soft:  167 179 196;
    --rgb-ink-muted: 186 195 209;
    --rgb-ink-faint: 203 210 220;
    --rgb-accent:    71 85 105;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="forest"] {
    --rgb-surface:   243 247 238;
    --rgb-sunken:    235 246 233;
    --rgb-line:      74 222 128;
    --rgb-ink:       74 222 128;
    --rgb-ink-soft:  108 227 150;
    --rgb-ink-muted: 142 232 172;
    --rgb-ink-faint: 172 237 192;
    --rgb-accent:    22 101 52;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="burgundy"] {
    --rgb-surface:   250 243 241;
    --rgb-sunken:    250 237 236;
    --rgb-line:      251 113 133;
    --rgb-ink:       251 113 133;
    --rgb-ink-soft:  251 139 155;
    --rgb-ink-muted: 251 165 176;
    --rgb-ink-faint: 250 188 196;
    --rgb-accent:    159 18 57;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="deep-violet"] {
    --rgb-surface:   246 244 250;
    --rgb-sunken:    242 239 250;
    --rgb-line:      167 139 250;
    --rgb-ink:       167 139 250;
    --rgb-ink-soft:  183 160 250;
    --rgb-ink-muted: 199 181 250;
    --rgb-ink-faint: 213 200 250;
    --rgb-accent:    109 40 217;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="postal"] {
    --rgb-surface:   250 245 233;
    --rgb-sunken:    248 236 224;
    --rgb-line:      200 64 47;
    --rgb-ink:       200 64 47;
    --rgb-ink-soft:  210 100 84;
    --rgb-ink-muted: 220 136 121;
    --rgb-ink-faint: 229 169 155;
    --rgb-accent:    30 58 110;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="bronze-ink"] {
    --rgb-surface:   245 240 228;
    --rgb-sunken:    236 231 219;
    --rgb-line:      61 55 46;
    --rgb-ink:       61 55 46;
    --rgb-ink-soft:  98 92 82;
    --rgb-ink-muted: 135 129 119;
    --rgb-ink-faint: 168 162 152;
    --rgb-accent:    125 107 79;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="petrol-copper"] {
    --rgb-surface:   241 247 245;
    --rgb-sunken:    239 240 236;
    --rgb-line:      194 112 61;
    --rgb-ink:       194 112 61;
    --rgb-ink-soft:  203 139 98;
    --rgb-ink-muted: 213 166 135;
    --rgb-ink-faint: 221 190 168;
    --rgb-accent:    15 118 110;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="midnight-gold"] {
    --rgb-surface:   26 35 51;
    --rgb-sunken:    32 41 58;
    --rgb-line:      148 163 184;
    --rgb-ink:       148 163 184;
    --rgb-ink-soft:  124 137 157;
    --rgb-ink-muted: 99 112 131;
    --rgb-ink-faint: 77 89 107;
    --rgb-accent:    217 119 6;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.18;
}

:root[data-theme="navy-sky"] {
    --rgb-surface:   243 248 252;
    --rgb-sunken:    232 244 251;
    --rgb-line:      14 165 233;
    --rgb-ink:       14 165 233;
    --rgb-ink-soft:  60 182 237;
    --rgb-ink-muted: 106 198 241;
    --rgb-ink-faint: 147 213 244;
    --rgb-accent:    30 58 138;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="forest-lime"] {
    --rgb-surface:   244 248 234;
    --rgb-sunken:    233 241 225;
    --rgb-line:      22 101 52;
    --rgb-ink:       22 101 52;
    --rgb-ink-soft:  66 130 88;
    --rgb-ink-muted: 111 160 125;
    --rgb-ink-faint: 151 186 158;
    --rgb-accent:    132 204 22;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.12;
}

:root[data-theme="plum-rose"] {
    --rgb-surface:   250 242 246;
    --rgb-sunken:    250 236 240;
    --rgb-line:      251 113 133;
    --rgb-ink:       251 113 133;
    --rgb-ink-soft:  251 139 156;
    --rgb-ink-muted: 251 165 178;
    --rgb-ink-faint: 250 188 199;
    --rgb-accent:    134 25 143;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="charcoal-amber"] {
    --rgb-surface:   32 30 28;
    --rgb-sunken:    39 37 35;
    --rgb-line:      168 162 158;
    --rgb-ink:       168 162 158;
    --rgb-ink-soft:  141 136 132;
    --rgb-ink-muted: 114 109 106;
    --rgb-ink-faint: 89 85 83;
    --rgb-accent:    245 158 11;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.18;
}

:root[data-theme="espresso-cream"] {
    --rgb-surface:   37 27 19;
    --rgb-sunken:    42 32 23;
    --rgb-line:      138 122 92;
    --rgb-ink:       138 122 92;
    --rgb-ink-soft:  118 103 77;
    --rgb-ink-muted: 98 84 63;
    --rgb-ink-faint: 79 67 50;
    --rgb-accent:    214 199 174;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.18;
}

:root[data-theme="cobalt-coral"] {
    --rgb-surface:   245 247 252;
    --rgb-sunken:    245 240 245;
    --rgb-line:      248 113 113;
    --rgb-ink:       248 113 113;
    --rgb-ink-soft:  247 140 141;
    --rgb-ink-muted: 247 167 169;
    --rgb-ink-faint: 246 191 194;
    --rgb-accent:    29 78 216;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="teal-gold"] {
    --rgb-surface:   249 244 230;
    --rgb-sunken:    247 238 219;
    --rgb-line:      217 119 6;
    --rgb-ink:       217 119 6;
    --rgb-ink-soft:  223 144 51;
    --rgb-ink-muted: 230 169 96;
    --rgb-ink-faint: 236 192 136;
    --rgb-accent:    15 118 110;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="graphite-red"] {
    --rgb-surface:   244 244 245;
    --rgb-sunken:    235 235 237;
    --rgb-line:      55 65 81;
    --rgb-ink:       55 65 81;
    --rgb-ink-soft:  93 101 114;
    --rgb-ink-muted: 131 137 147;
    --rgb-ink-faint: 165 169 176;
    --rgb-accent:    220 38 38;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="red-flick"] {
    --rgb-surface:   249 245 240;
    --rgb-sunken:    239 235 230;
    --rgb-line:      43 38 32;
    --rgb-ink:       43 38 32;
    --rgb-ink-soft:  84 79 74;
    --rgb-ink-muted: 125 121 115;
    --rgb-ink-faint: 162 158 153;
    --rgb-accent:    200 64 47;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="sky-flick"] {
    --rgb-surface:   245 248 250;
    --rgb-sunken:    235 238 239;
    --rgb-line:      43 38 32;
    --rgb-ink:       43 38 32;
    --rgb-ink-soft:  83 80 76;
    --rgb-ink-muted: 124 122 119;
    --rgb-ink-faint: 160 160 158;
    --rgb-accent:    2 132 199;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="bronze-flick"] {
    --rgb-surface:   248 244 238;
    --rgb-sunken:    238 234 228;
    --rgb-line:      43 38 32;
    --rgb-ink:       43 38 32;
    --rgb-ink-soft:  84 79 73;
    --rgb-ink-muted: 125 120 114;
    --rgb-ink-faint: 162 157 151;
    --rgb-accent:    125 107 79;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="violet-flick"] {
    --rgb-surface:   247 246 251;
    --rgb-sunken:    237 236 240;
    --rgb-line:      43 38 32;
    --rgb-ink:       43 38 32;
    --rgb-ink-soft:  84 80 76;
    --rgb-ink-muted: 125 121 120;
    --rgb-ink-faint: 161 159 159;
    --rgb-accent:    139 92 246;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="tricolore"] {
    --rgb-surface:   251 246 232;
    --rgb-sunken:    249 242 222;
    --rgb-line:      212 160 23;
    --rgb-ink:       212 160 23;
    --rgb-ink-soft:  220 177 65;
    --rgb-ink-muted: 228 194 107;
    --rgb-ink-faint: 235 210 144;
    --rgb-accent:    200 64 47;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="indigo-violet"] {
    --rgb-surface:   244 244 251;
    --rgb-sunken:    240 236 251;
    --rgb-line:      168 85 247;
    --rgb-ink:       168 85 247;
    --rgb-ink-soft:  183 117 248;
    --rgb-ink-muted: 198 149 249;
    --rgb-ink-faint: 212 177 249;
    --rgb-accent:    79 70 229;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="sunset"] {
    --rgb-surface:   253 246 236;
    --rgb-sunken:    253 243 226;
    --rgb-line:      251 191 36;
    --rgb-ink:       251 191 36;
    --rgb-ink-soft:  251 202 76;
    --rgb-ink-muted: 252 213 116;
    --rgb-ink-faint: 252 223 152;
    --rgb-accent:    225 29 72;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="ocean"] {
    --rgb-surface:   241 248 249;
    --rgb-sunken:    230 245 245;
    --rgb-line:      20 184 166;
    --rgb-ink:       20 184 166;
    --rgb-ink-soft:  64 197 183;
    --rgb-ink-muted: 108 210 199;
    --rgb-ink-faint: 148 221 214;
    --rgb-accent:    14 116 144;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="aurora"] {
    --rgb-surface:   15 32 39;
    --rgb-sunken:    14 37 47;
    --rgb-line:      2 132 199;
    --rgb-ink:       2 132 199;
    --rgb-ink-soft:  5 112 167;
    --rgb-ink-muted: 7 92 135;
    --rgb-ink-faint: 10 74 106;
    --rgb-accent:    16 185 129;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.18;
}

:root[data-theme="berry"] {
    --rgb-surface:   250 242 248;
    --rgb-sunken:    249 231 239;
    --rgb-line:      225 29 72;
    --rgb-ink:       225 29 72;
    --rgb-ink-soft:  230 72 107;
    --rgb-ink-muted: 235 114 142;
    --rgb-ink-faint: 240 153 174;
    --rgb-accent:    162 28 175;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="ember"] {
    --rgb-surface:   34 23 19;
    --rgb-sunken:    45 31 20;
    --rgb-line:      251 191 36;
    --rgb-ink:       251 191 36;
    --rgb-ink-soft:  208 157 33;
    --rgb-ink-muted: 164 124 29;
    --rgb-ink-faint: 125 94 26;
    --rgb-accent:    234 88 12;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.18;
}

:root[data-theme="twilight"] {
    --rgb-surface:   32 27 56;
    --rgb-sunken:    37 30 66;
    --rgb-line:      139 92 246;
    --rgb-ink:       139 92 246;
    --rgb-ink-soft:  118 79 208;
    --rgb-ink-muted: 96 66 170;
    --rgb-ink-faint: 77 54 136;
    --rgb-accent:    244 114 182;
    --rgb-accent-ink:17 24 39;
    --line-alpha: 0.18;
}

:root[data-theme="copper"] {
    --rgb-surface:   250 241 231;
    --rgb-sunken:    250 237 220;
    --rgb-line:      245 158 11;
    --rgb-ink:       245 158 11;
    --rgb-ink-soft:  246 175 55;
    --rgb-ink-muted: 247 191 99;
    --rgb-ink-faint: 248 206 139;
    --rgb-accent:    180 83 9;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}

:root[data-theme="blue-tonal"] {
    --rgb-surface:   242 245 250;
    --rgb-sunken:    235 241 250;
    --rgb-line:      96 165 250;
    --rgb-ink:       96 165 250;
    --rgb-ink-soft:  125 181 250;
    --rgb-ink-muted: 154 197 250;
    --rgb-ink-faint: 181 211 250;
    --rgb-accent:    30 64 175;
    --rgb-accent-ink:255 255 255;
    --line-alpha: 0.12;
}