:root {
    color-scheme: light;

    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Jost', system-ui, -apple-system, sans-serif;
    --radius-pill: 999px;

    /* The preference controls - language pill, theme toggle - are capsules of
       one family, so they carry one apparent height and one gap wherever they
       stand together: header, phone stack, overlay menu. */
    --control-size: 36px;
    --control-gap: 12px;

    --bg: linear-gradient(175deg, #EFE9F1, #F8F2F0 55%, #F1E4E2);
    --bgsolid: #F4EDEF;
    --bg2: #F8F4F2;

    --ink: #332F38;
    --muted: #6F6A73;
    --soft: #6C666E;

    /* One brand pink, three jobs. `--accent` stays the ornament shade - diamonds,
       borders, gradients, glyphs - while text that has to be read carries a
       darkened sibling: `--accent-text` clears 4.5:1 on every light surface,
       `--accent-display` clears the 3:1 large-text bar the display italics need. */
    --accent: #B77F88;
    --accent-text: #8E5962;
    --accent-display: #AD757E;
    --accent2: #C9868F;
    --accent-hover: #77474F;

    --line: rgba(201, 134, 143, .28);
    --card: rgba(255, 255, 255, .72);
    --cardsolid: #FBF7F6;
    --navbg: rgba(248, 242, 240, .86);

    --gradtext: linear-gradient(115deg, #C9868F 0%, #C39AA1 35%, #8E8790 72%, #6E6B74 100%);

    --btnbg: #9D6873;
    --btnbgH: #88545F;
    --btnink: #FFFFFF;
    --btnshadow: 0 14px 34px rgba(154, 104, 113, .32);
    --cardshadow: 0 30px 60px rgba(51, 47, 56, .14);

    /* The accent tint every lifted surface casts, as channels: each rule keeps its own
       distance and opacity, the colour itself is decided here and follows the theme. */
    --shadowtint: 154 104 113;

    --ghostline: #C9AEB3;
    --ghostink: #5C5660;

    --bandbg: #26232B;
    --bandink: #EDE6E9;
    --bandmuted: #A9A2AE;

    --inputbg: rgba(255, 255, 255, .8);
    --inputline: #D9C3C7;

    --diamond: linear-gradient(135deg, #D9A3AA, #F6E0DA 45%, #BB848D);

    --glowA: radial-gradient(closest-side, rgba(210, 146, 155, .16), transparent 70%);
    --glowB: radial-gradient(closest-side, rgba(154, 140, 160, .14), transparent 70%);

    --bandlinkH: #E9BFC0;
    --selectionbg: #E9BFC0;
    --selectionink: #332F38;

    /* The dark palette, written once. A media query cannot join a selector list,
       so the two rules below repeat the mapping - never a value. */
    --dark-bg: #211E26;
    --dark-bgsolid: #211E26;
    --dark-bg2: #26232B;
    --dark-ink: #F2ECEF;
    --dark-muted: #A9A2AE;
    --dark-soft: #938C95;
    --dark-accent: #D2929B;
    --dark-accent2: #E2A7AE;
    --dark-accent-hover: #E2A7AE;
    --dark-line: rgba(210, 146, 155, .3);
    --dark-card: #2A2630;
    --dark-cardsolid: #2A2630;
    --dark-navbg: rgba(33, 30, 38, .86);
    --dark-gradtext: linear-gradient(115deg, #E2A7AE 0%, #F3D5CE 45%, #C9868F 100%);
    --dark-btnbg: #DCA0A9;
    --dark-btnbgH: #EDC2C7;
    --dark-btnink: #26232B;
    --dark-btnshadow: 0 14px 40px rgba(210, 146, 155, .25);
    --dark-cardshadow: 0 30px 60px rgba(210, 146, 155, .16);
    --dark-shadowtint: 210 146 155;
    --dark-ghostline: rgba(233, 191, 192, .45);
    --dark-ghostink: #E9DEE2;
    --dark-bandbg: #1B181F;
    --dark-inputbg: #2A2630;
    --dark-inputline: #4A434F;
    --dark-diamond: linear-gradient(135deg, rgba(217, 163, 170, .85), rgba(243, 213, 206, .5) 45%, rgba(110, 107, 116, .85));
    --dark-glowA: radial-gradient(closest-side, rgba(210, 146, 155, .22), transparent 70%);
    --dark-glowB: radial-gradient(closest-side, rgba(110, 107, 116, .3), transparent 70%);
}

html.dark {
    color-scheme: dark;

    --bg: var(--dark-bg);
    --bgsolid: var(--dark-bgsolid);
    --bg2: var(--dark-bg2);
    --ink: var(--dark-ink);
    --muted: var(--dark-muted);
    --soft: var(--dark-soft);
    --accent: var(--dark-accent);
    --accent-text: var(--dark-accent);
    --accent-display: var(--dark-accent);
    --accent-hover: var(--dark-accent-hover);
    --accent2: var(--dark-accent2);
    --line: var(--dark-line);
    --card: var(--dark-card);
    --cardsolid: var(--dark-cardsolid);
    --navbg: var(--dark-navbg);
    --gradtext: var(--dark-gradtext);
    --btnbg: var(--dark-btnbg);
    --btnbgH: var(--dark-btnbgH);
    --btnink: var(--dark-btnink);
    --btnshadow: var(--dark-btnshadow);
    --cardshadow: var(--dark-cardshadow);
    --shadowtint: var(--dark-shadowtint);
    --ghostline: var(--dark-ghostline);
    --ghostink: var(--dark-ghostink);
    --bandbg: var(--dark-bandbg);
    --inputbg: var(--dark-inputbg);
    --inputline: var(--dark-inputline);
    --diamond: var(--dark-diamond);
    --glowA: var(--dark-glowA);
    --glowB: var(--dark-glowB);
}

/* A visitor without JavaScript never gets a class stamped, so the system
   preference has to reach the tokens on its own. `:not(.light)` keeps the
   explicit light choice winning over a dark system. */
@media (prefers-color-scheme: dark) {
    html:not(.light) {
        color-scheme: dark;

        --bg: var(--dark-bg);
        --bgsolid: var(--dark-bgsolid);
        --bg2: var(--dark-bg2);
        --ink: var(--dark-ink);
        --muted: var(--dark-muted);
        --soft: var(--dark-soft);
        --accent: var(--dark-accent);
        --accent-text: var(--dark-accent);
        --accent-display: var(--dark-accent);
        --accent-hover: var(--dark-accent-hover);
        --accent2: var(--dark-accent2);
        --line: var(--dark-line);
        --card: var(--dark-card);
        --cardsolid: var(--dark-cardsolid);
        --navbg: var(--dark-navbg);
        --gradtext: var(--dark-gradtext);
        --btnbg: var(--dark-btnbg);
        --btnbgH: var(--dark-btnbgH);
        --btnink: var(--dark-btnink);
        --btnshadow: var(--dark-btnshadow);
        --cardshadow: var(--dark-cardshadow);
        --shadowtint: var(--dark-shadowtint);
        --ghostline: var(--dark-ghostline);
        --ghostink: var(--dark-ghostink);
        --bandbg: var(--dark-bandbg);
        --inputbg: var(--dark-inputbg);
        --inputline: var(--dark-inputline);
        --diamond: var(--dark-diamond);
        --glowA: var(--dark-glowA);
        --glowB: var(--dark-glowB);
    }
}