/* Looks: sets of the page's colour tokens as light-dark(day, night) pairs, from each palette sheet; web/looks.py
   lists them. Every pair that carries words holds 4.5:1 in both modes, 3:1 for the edge of anything you press.
   Paper themes (all but Phosphor and Midnight) use their link colour on every page (no --sect) and barely glow
   (--bloom). Vera's glass is green-black phosphor in all of them.

   Kitchen Table (docs/STYLE.md) is first. The block just below it gives every look the roles Kitchen Table's
   layout reads and the built set lacks (its people, the meaning washes, Vera's box, Send, the five effect
   tokens), worked out from
   that look's own tokens, so no look has to name them (it may). It comes before the looks so a look that
   names one wins. --here-icon and --here-pill are not in it: the page reads them with a fallback, and
   Phosphor (in style.css) leaves them unset on purpose. */

[data-theme] {
  /* the effects (style.css, section 11), plain: no light on the page, no scanlines, no glow
     beyond the look's own, the heading face. A look may name its own; the test holds what they may be. */
  --fx-page: none;
  --fx-scan: transparent;
  --fx-glow: 0;
  --fx-title: var(--font-head);
  --fx-title-adjust: none;
  --band-link: var(--on-band);
  --ok-soft: color-mix(in srgb, var(--ok) 10%, var(--card));
  --ok-line: color-mix(in srgb, var(--ok) 35%, var(--card));
  --amber-soft: color-mix(in srgb, var(--amber) 10%, var(--card));
  --amber-line: color-mix(in srgb, var(--amber) 35%, var(--card));
  --red-soft: color-mix(in srgb, var(--red) 10%, var(--card));
  --red-line: color-mix(in srgb, var(--red) 35%, var(--card));
  --on-red: var(--on-bright);
  --on-vera: var(--on-bright);
  --vera-soft: color-mix(in srgb, var(--vera) 10%, var(--card));
  --vera-line: color-mix(in srgb, var(--vera) 35%, var(--card));
  --ask-ink: var(--ink);
  --ask-ink-2: var(--ink-2);
  --ask-rim: inset 0 0 0 1px var(--line);
  --ask-edge: var(--edge);
  --send: var(--primary);
  --send-2: var(--primary-hover);
  --on-send: var(--on-primary);
  /* the rules and dimmed fills inside Vera's box, from its own words */
  --ask-rule: color-mix(in srgb, var(--ask-ink) 16%, transparent);
  --ask-fill: color-mix(in srgb, var(--ask-ink) 12%, transparent);
  --ask-fill-2: color-mix(in srgb, var(--ask-ink) 18%, transparent);
  /* the eight people and Everyone: wash, name ink, mark, letter */
  --p1: #2F5D9B;
  --p1-soft: light-dark(#E3EAF5, #18243A);
  --p1-ink: light-dark(#2F5D9B, #9DBBE8);
  --p1-mark: light-dark(#2F5D9B, #9DBBE8);
  --p1-on: #FFFFFF;
  --p2: #7B4790;
  --p2-soft: light-dark(#F0E6F4, #261D33);
  --p2-ink: light-dark(#7B4790, #D2A8E2);
  --p2-mark: light-dark(#7B4790, #D2A8E2);
  --p2-on: #FFFFFF;
  --p3: #A83C80;
  --p3-soft: light-dark(#F6E3EF, #2E1A28);
  --p3-ink: light-dark(#9C3777, #EBA6D3);
  --p3-mark: light-dark(#A83C80, #EBA6D3);
  --p3-on: #FFFFFF;
  --p4: #A2560E;
  --p4-soft: light-dark(#F6E8D8, #2E2218);
  --p4-ink: light-dark(#93500E, #EDB67C);
  --p4-mark: light-dark(#A2560E, #EDB67C);
  --p4-on: #FFFFFF;
  --p5: #0B6A84;
  --p5-soft: light-dark(#DDEFF3, #12272C);
  --p5-ink: light-dark(#0A6178, #8DD0E0);
  --p5-mark: light-dark(#0B6A84, #8DD0E0);
  --p5-on: #FFFFFF;
  --p6: #5448B0;
  --p6-soft: light-dark(#E8E6F7, #201F38);
  --p6-ink: light-dark(#5448B0, #B5AEF0);
  --p6-mark: light-dark(#5448B0, #B5AEF0);
  --p6-on: #FFFFFF;
  --p7: #59661A;
  --p7-soft: light-dark(#ECEFD9, #212614);
  --p7-ink: light-dark(#525E17, #C3D27A);
  --p7-mark: light-dark(#59661A, #C3D27A);
  --p7-on: #FFFFFF;
  --p8: #6F4E37;
  --p8-soft: light-dark(#F1E8E0, #2A221B);
  --p8-ink: light-dark(#6F4E37, #D9B79C);
  --p8-mark: light-dark(#6F4E37, #D9B79C);
  --p8-on: #FFFFFF;
  --everyone: light-dark(#596263, #5E6A66);
  --everyone-soft: light-dark(#ECE8E0, #1C2422);
  --everyone-ink: light-dark(#4B5657, #CBC5B6);
  --everyone-mark: light-dark(#8A806C, #A3A69E);
  --everyone-on: #FFFFFF;
}

[data-theme="kitchen"] {
  /* the built set's tokens, every one, as every look names them */
  color-scheme: light dark;
  /* surfaces and words: the built names */
  --paper: light-dark(#F6F1E7, #0C100F);
  --paper-2: light-dark(#EFE7D7, #121816);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --card: light-dark(#FFFCF6, #161D1B);
  --field: light-dark(#FFFFFF, #1B2321);
  --line: light-dark(#E2D8C4, #24302C);
  --line-2: light-dark(#D3C6AC, #33413C);
  --edge: light-dark(#8A806C, #7E8C86);
  --ink: light-dark(#1D2526, #EEE8DA);
  --ink-2: light-dark(#4B5657, #CBC5B6);
  --ink-3: light-dark(#596263, #A3A69E);
  --faint-ink: var(--ink-3);
  /* the panel (the sidebar, the phone's top bar): the built names */
  --band: light-dark(#EFE7D7, #121816);
  --band-hi: light-dark(#FFFCF6, #161D1B);
  --band-line: light-dark(#E2D8C4, #24302C);
  --on-band: light-dark(#1D2526, #EEE8DA);
  --on-band-2: light-dark(#4B5657, #CBC5B6);
  --here: light-dark(#FFFCF6, #161D1B);
  --on-here: light-dark(#1D2526, #EEE8DA);
  --here-icon: light-dark(#1E5C4F, #6DFF9C);
  --here-pill: light-dark(#DCEAE2, #10241A);
  /* the action, focus, today: the built names */
  --link: light-dark(#1E5C4F, #8BD3B4);
  --primary: light-dark(#1E5C4F, #2D7462);
  --primary-hover: light-dark(#164539, #24604F);
  --on-primary: #FFFFFF;
  --focus: light-dark(#1D2526, #EEE8DA);
  --lit: light-dark(#1E5C4F, #6DFF9C);
  --today: light-dark(#1E5C4F, #6DFF9C);
  --on-today: light-dark(#FFFFFF, #0C100F);
  --today-rule: light-dark(#1E5C4F, #6DFF9C);
  --today-wash: light-dark(#DCEAE2, #10241A);
  /* meanings: the built names */
  --ok: light-dark(#2B7148, #7FE3A5);
  --amber: light-dark(#7E5108, #F5B94A);
  --red: light-dark(#B3381F, #FF8B74);
  --error-ink: light-dark(#B3381F, #FF8B74);
  /* Vera on the page: the built names */
  --vera: light-dark(#1E5C4F, #6DFF9C);
  --vera-bg: light-dark(#1E5C4F, #4FE08A);
  --cursor: light-dark(#1B9A55, #6DFF9C);
  --ask-bg: light-dark(#12382F, #0F2A22);
  /* the built set's colours for parts of the site and kinds (Kitchen Table's layout keeps kinds neutral; these let the old layout read in it) */
  --lilac: light-dark(#5448B0, #B5AEF0);
  --cyan: light-dark(#0A6178, #8DD0E0);
  --lemon: light-dark(#525E17, #C3D27A);
  --pink: light-dark(#9C3777, #EBA6D3);
  --orange: light-dark(#93500E, #EDB67C);
  --on-bright: light-dark(#FFFFFF, #0C100F);
  /* one colour for a person: the built names (Kitchen Table uses the eight below instead) */
  --person: #2F5D9B;
  --on-person: #FFFFFF;
  /* depth and light: the built names */
  --bloom: 0;
  --glow: 0 1px 0 light-dark(rgb(60 45 20 / .12), rgb(0 0 0 / .5));
  --glow-hover: 0 4px 12px -4px light-dark(rgb(60 45 20 / .35), rgb(0 0 0 / .7));
  --shadow: 0 1px 0 light-dark(rgb(60 45 20 / .05), rgb(0 0 0 / .4));
  --pop: 0 8px 22px -14px light-dark(rgb(60 45 20 / .45), rgb(0 0 0 / .9));
  --pop-up: 0 -8px 24px -16px light-dark(rgb(60 45 20 / .5), rgb(0 0 0 / .8));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: transparent;
  --scan: transparent;
  --raster: transparent;
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--card);

  /* NEW: roles Kitchen Table needs that the built set lacks (the [data-theme] block above gives every other look a value for each) */
  --band-link: light-dark(#1E5C4F, #8BD3B4);
  --ok-soft: light-dark(#DDEFE2, #11261B);
  --ok-line: light-dark(#BFDCC8, #24503A);
  --amber-soft: light-dark(#FBEFD0, #2A2112);
  --amber-line: light-dark(#EBD69B, #5E4620);
  --red-soft: light-dark(#F9E1D9, #33191A);
  --red-line: light-dark(#EFC3B6, #5C2E2B);
  --on-red: light-dark(#FFFFFF, #0C100F);
  --on-vera: light-dark(#FFFFFF, #0C100F);
  --vera-soft: light-dark(#DCEAE2, #10241A);
  --vera-line: light-dark(#B9D3C6, #22513A);
  --ask-ink: light-dark(#FFFFFF, #EEE8DA);
  --ask-ink-2: light-dark(#D2E3DA, #C3D2CA);
  --ask-rim: inset 0 0 0 1px light-dark(rgb(255 255 255 / .06), transparent), inset 0 0 0 1.5px light-dark(transparent, #3E8A66), inset 0 0 28px light-dark(transparent, rgb(109 255 156 / .08)), 0 0 26px -10px light-dark(transparent, rgb(109 255 156 / .45));
  --ask-edge: light-dark(transparent, #7E8C86);
  --ask-rule: rgb(255 255 255 / .16);
  --ask-fill: rgb(255 255 255 / .12);
  --ask-fill-2: rgb(255 255 255 / .18);
  --send: light-dark(#F2C14E, #E0B04A);
  --send-2: light-dark(#E5B035, #F0C35C);
  --on-send: light-dark(#1D2526, #0C100F);

}

/* ---- Phosphor (dark only): the green-screen look the page was first drawn in ----------------- */
[data-theme="phosphor"] {
  color-scheme: dark;
  /* a look names every token the others do; Phosphor, once the default, did not need these two */
  --here-icon: var(--on-here);
  --here-pill: var(--here);

  --paper: #0b0e0d;
  --paper-2: #171c1a;
  --paper-3: #1d2321;
  --card: #121615;
  --field: #0e1211;
  --line: #232a27;
  --line-2: #2f3834;
  --edge: #5c6862;           /* the edge of anything you type in or press: 3.1:1 on a surface */

  --ink: #edf2ef;
  --ink-2: #bac5bf;          /* secondary words */
  --ink-3: #919e98;          /* quiet words: 6.6:1 on a surface */
  --faint-ink: #7d8a84;      /* placeholders and ids: 5:1 on a field */

  /* The bar, which every theme calls its band: here a pane of the page's own dark. */
  --band: rgb(11 14 13 / 0.82);
  --band-tabs: rgb(14 18 17 / 0.94);
  --band-hi: #171c1a;
  --band-line: #232a27;
  --on-band: #edf2ef;
  --on-band-2: #919e98;
  --here: #1d2321;           /* the page you are on, in the bar */
  --on-here: #edf2ef;

  /* The phosphors of the time, softened: the green and amber of the monitors, and the bright
     cyan, yellow, magenta and red of the first colour screens. Each part of the site takes one.
     Tuned so no two that share a page are easily confused, for typical sight or the commonest
     colour-blindness (docs/STYLE.md has the measures). */
  --lilac: #ae9bff;          /* ideas */
  --cyan: #6cd4ff;           /* plans and dates, and going places */
  --lemon: #f7dc78;          /* things to do */
  --amber: #ffb850;          /* people, food, setting up: an amber screen's phosphor */
  --pink: #ff9fd0;           /* shows, and children's faces */
  --orange: #ff956c;         /* the seasons */
  --red: #ff6b6b;            /* only what went wrong, or cannot be undone */
  --on-bright: #07130c;      /* words on any of the colours above */

  --ok: #6dff9c;             /* working, done */
  --vera: #6dff9c;           /* her name and her words, on the page */
  --vera-bg: #6dff9c;        /* a lamp that is on */
  --cursor: #6dff9c;         /* the wordmark's cursor */
  --link: #6dff9c;
  --primary: #6dff9c;        /* the one button to press */
  --primary-hover: #92ffb8;
  --on-primary: #07130c;
  --focus: #6dff9c;
  --lit: #6dff9c;            /* the light the page gives off where attention is */
  --today: #ffb850;          /* today's stamp, and what is next */
  --on-today: #07130c;
  --today-rule: #ffb850;
  --today-wash: rgb(255 184 80 / 0.05);
  --person: #ffb850;         /* a family member's face */
  --on-person: #07130c;
  --error-ink: #ffd6d6;

  /* How much the page glows, and what its surfaces cast. Phosphor lights; the paper themes barely do. */
  --bloom: 1;
  --glow: 0 0 0 1px rgb(109 255 156 / 0.35), 0 8px 28px -10px rgb(109 255 156 / 0.7);
  --glow-hover: 0 0 0 1px rgb(109 255 156 / 0.5), 0 10px 34px -10px rgb(109 255 156 / 0.85);
  --shadow: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 12px 32px -22px rgb(0 0 0 / 0.9);
  --pop: 0 22px 44px -18px rgb(0 0 0 / 0.95);
  --pop-up: 0 -8px 30px rgb(0 0 0 / 0.45);
  --wash: rgb(255 255 255 / 0.05);
  --wash-faint: rgb(255 255 255 / 0.025);
  --shade: rgb(0 0 0 / 0.22);
  --hi: rgb(255 255 255 / 0.05);
  --scan: rgb(255 255 255 / 0.028);
  --raster: rgb(0 0 0 / 0.22);
  --ask-bg: rgb(9 12 11 / 0.72);
  --bar-bg: rgb(18 22 21 / 0.9);
}

/* ---- Afterglow: a look from the Phosphor design language, on Kitchen Table ---------------- */
/* One fixed look, whatever the device or the Look page's day and night say (as the Phosphor look
   is): charcoal glass with a breath of green, a darker glass band with faint scanlines, and Vera's
   things the one lit thing (--fx-glow: her sign's wider halo and full rim, her Send, her lines).
   The family's links are a soft mint and their button a pale plate, never the phosphor. Page titles
   and the wordmark are set in VT323. It has no day, so it is color-scheme: dark and the two
   data-mode rules skip it. Phosphor is the design language; Afterglow is one look derived from it
   (HANDOFF.md §8.8). */
[data-theme="afterglow"] {
  color-scheme: dark;
  /* the effects (style.css section 11) */
  --fx-page: radial-gradient(1100px 520px at 18% -120px, rgb(109 255 156 / .07), transparent 70%);
  --fx-scan: rgb(190 255 215 / .035);
  --fx-glow: 1;
  --fx-title: "VT323", var(--font-head);
  --fx-title-adjust: cap-height .7;
  /* surfaces and words */
  --paper: #0A100E;
  --paper-2: #0F1714;
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --card: #131C19;
  --field: #0C1311;
  --line: #1E2A26;
  --line-2: #2B3A34;
  --edge: #6E8479;
  --ink: #E9F1E5;
  --ink-2: #C3CEC2;
  --ink-3: #9DAA9F;
  --faint-ink: var(--ink-3);
  /* the band: darker glass, the screen's own frame */
  --band: #060A08;
  --band-hi: #111A17;
  --band-line: #1A2622;
  --on-band: #E9F1E5;
  --on-band-2: #B9C6BF;
  --here: #13221C;
  --on-here: #E9F1E5;
  --here-icon: #6DFF9C;
  --here-pill: #10241A;
  --band-link: #8EE0B9;
  /* the action, focus, today */
  --link: #8EE0B9;
  --primary: #D3EEDD;
  --primary-hover: #EAF7EE;
  --on-primary: #0A100E;
  --focus: #E9F1E5;
  --lit: #6DFF9C;
  --today: #6DFF9C;
  --on-today: #06100B;
  --today-rule: #6DFF9C;
  --today-wash: #0E2318;
  /* meanings */
  --ok: #7FE3A5;
  --amber: #F5B94A;
  --red: #FF8B74;
  --error-ink: #FF8B74;
  /* Vera on the page */
  --vera: #6DFF9C;
  --vera-bg: #4FE08A;
  --cursor: #6DFF9C;
  --ask-bg: #0B1813;
  /* the built set's part colours, as Kitchen Table's */
  --lilac: #B5AEF0;
  --cyan: #8DD0E0;
  --lemon: #C3D27A;
  --pink: #EBA6D3;
  --orange: #EDB67C;
  --on-bright: #06100B;
  --person: #2F5D9B;
  --on-person: #FFFFFF;
  /* depth and light */
  --bloom: 1;
  --glow: 0 0 0 1px rgb(109 255 156 / .35), 0 8px 28px -10px rgb(109 255 156 / .6);
  --glow-hover: 0 0 0 1px rgb(109 255 156 / .5), 0 10px 34px -10px rgb(109 255 156 / .8);
  --shadow: inset 0 1px 0 rgb(233 241 229 / .035), 0 1px 0 rgb(0 0 0 / .4);
  --pop: 0 8px 22px -14px rgb(0 0 0 / .9);
  --pop-up: 0 -8px 24px -16px rgb(0 0 0 / .9);
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: rgb(233 241 229 / .035);
  --scan: rgb(255 255 255 / .028);
  --raster: rgb(0 0 0 / .22);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--card);
  /* Kitchen Table's own roles */
  --ok-soft: #10241A;
  --ok-line: #24503A;
  --amber-soft: #261E10;
  --amber-line: #5E4620;
  --red-soft: #2E1716;
  --red-line: #5C2E2B;
  --on-red: #06100B;
  --on-vera: #06100B;
  --vera-soft: #0E2318;
  --vera-line: #22513A;
  --ask-ink: #E9F1E5;
  --ask-ink-2: #BFD0C4;
  --ask-rim: inset 0 0 0 1.5px #3E8A66, inset 0 0 32px rgb(109 255 156 / .07), 0 0 30px -12px rgb(109 255 156 / .5);
  --ask-edge: #6E8479;
  --send: #6DFF9C;
  --send-2: #93FFB6;
  --on-send: #06100B;
  --ask-rule: rgb(233 241 229 / .16);
  --ask-fill: rgb(233 241 229 / .1);
  --ask-fill-2: rgb(233 241 229 / .16);
}

[data-theme="rail"] {
  color-scheme: light dark;
  --paper: light-dark(#F5F6F8, #0D1420);
  --paper-2: light-dark(#E7EAEF, #182233);
  --card: light-dark(#FFFFFF, #131C28);
  --field: light-dark(#FFFFFF, #162031);
  --line: light-dark(#C9CFD8, #283347);
  --line-2: light-dark(#A9B2C0, #3B4758);
  --edge: light-dark(#6C7789, #7E899C);
  --ink: light-dark(#0E1726, #EEF1F6);
  --ink-2: light-dark(#344054, #C2CAD7);
  --ink-3: light-dark(#535E70, #9AA4B6);
  --band: light-dark(#0B2C69, #13336F);
  --band-hi: light-dark(#17397A, #1E4183);
  --band-line: light-dark(#26478A, #2D4F90);
  --on-band: light-dark(#FFFFFF, #F4F6FA);
  --on-band-2: light-dark(#BCC8E2, #C3CEE6);
  --here: light-dark(#FFC917, #FFD23A);
  --on-here: light-dark(#0E1726, #0D1420);
  --here-icon: light-dark(#0E1726, #0D1420);
  --here-pill: light-dark(#FFC917, #FFD23A);
  --lilac: light-dark(#532CA8, #CFB6FE);
  --cyan: light-dark(#1A5DAE, #A8C0FE);
  --lemon: light-dark(#6E5A2C, #DCC291);
  --amber: light-dark(#A1430B, #FFA766);
  --pink: light-dark(#844C79, #EDB1DD);
  --orange: light-dark(#9E4700, #FEB383);
  --red: light-dark(#B42318, #FF8B74);
  --on-bright: light-dark(#FFFFFF, #0D1420);
  --ok: light-dark(#17703F, #7FE3A5);
  --vera: light-dark(#0A6A4B, #6DFF9C);
  --vera-bg: light-dark(#0B8457, #4FE08A);
  --cursor: light-dark(#12945A, #6DFF9C);
  --link: light-dark(#163F8E, #A9C3FF);
  --primary: light-dark(#1747A3, #A9C3FF);
  --on-primary: light-dark(#FFFFFF, #0D1420);
  --focus: light-dark(#1E58C8, #A9C3FF);
  --lit: light-dark(#1E58C8, #A9C3FF);
  --today: light-dark(#FFC917, #FFD23A);
  --on-today: light-dark(#0E1726, #0D1420);
  --today-rule: light-dark(#7F5F00, #FFD23A);
  --today-wash: light-dark(#FFF5CF, #262112);
  --person: light-dark(#256FC8, #7888D1);
  --on-person: light-dark(#FFFFFF, #0D1420);
  --error-ink: light-dark(#B42318, #FF8B74);
  --primary-hover: light-dark(color-mix(in srgb, var(--primary) 86%, #000), color-mix(in srgb, var(--primary) 84%, #fff));
  --bloom: 0.35;
  --sect: var(--link);
  --glow: 0 1px 0 light-dark(rgb(14 23 38 / 0.12), rgb(0 0 0 / 0.5));
  --glow-hover: 0 4px 12px -4px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.7));
  --shadow: 0 1px 0 light-dark(rgb(14 23 38 / 0.04), rgb(255 255 255 / 0.03)), 0 10px 26px -20px light-dark(rgb(14 23 38 / 0.3), rgb(0 0 0 / 0.9));
  --pop: 0 20px 40px -16px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.9));
  --pop-up: 0 -6px 24px light-dark(rgb(14 23 38 / 0.14), rgb(0 0 0 / 0.45));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: light-dark(transparent, rgb(255 255 255 / 0.04));
  --scan: transparent;
  --raster: transparent;
  --ask-bg: var(--card);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--band);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --faint-ink: var(--ink-3);
}

[data-theme="enamel"] {
  color-scheme: light dark;
  --paper: light-dark(#ECE9E5, #161513);
  --paper-2: light-dark(#DFDCD7, #22201E);
  --card: light-dark(#FAF9F7, #1C1B19);
  --field: light-dark(#FAF9F7, #1C1B19);
  --line: light-dark(#C9C5C0, #34312E);
  --line-2: light-dark(#B0ACA6, #484440);
  --edge: light-dark(#797570, #847F7A);
  --ink: light-dark(#162025, #F0ECE7);
  --ink-2: light-dark(#414B51, #CECAC4);
  --ink-3: light-dark(#586065, #AEAAA5);
  --band: light-dark(#0D2D40, #143344);
  --band-hi: light-dark(#1D3D50, #234153);
  --band-line: light-dark(#2B495C, #304D5F);
  --on-band: #F6F3EF;
  --on-band-2: light-dark(#BCCBD6, #BFCFD9);
  --here: #F6F3EF;
  --on-here: light-dark(#0D2D40, #143344);
  --here-icon: light-dark(#0D2D40, #143344);
  --here-pill: #F6F3EF;
  --lilac: light-dark(#59508F, #BBB7EC);
  --cyan: light-dark(#3B5993, #A4BEEF);
  --lemon: light-dark(#6C5901, #CDBE86);
  --amber: light-dark(#84571A, #EDBB64);
  --pink: light-dark(#7A4474, #D3B1CE);
  --orange: light-dark(#7F4E07, #DEB58A);
  --red: light-dark(#AF3126, #F58D79);
  --on-bright: light-dark(#FAF9F7, #161513);
  --ok: light-dark(#276C3F, #85E3A0);
  --vera: light-dark(#0A6A4B, #6DFF9C);
  --vera-bg: light-dark(#0B8457, #4FE08A);
  --cursor: light-dark(#12945A, #6DFF9C);
  --link: light-dark(#162025, #F0ECE7);
  --primary: light-dark(#162025, #F0ECE7);
  --on-primary: light-dark(#FAF9F7, #161513);
  --focus: light-dark(#162025, #F0ECE7);
  --lit: #4F7FD0;
  --today: light-dark(#0B8457, #6DFF9C);
  --on-today: light-dark(#FFFFFF, #102719);
  --today-rule: light-dark(#0A6A4B, #6DFF9C);
  --today-wash: light-dark(#D6EDDF, #102719);
  --person: #6187CE;
  --on-person: light-dark(#162025, #161513);
  --error-ink: light-dark(#AF3126, #F58D79);
  --primary-hover: light-dark(color-mix(in srgb, var(--primary) 86%, #000), color-mix(in srgb, var(--primary) 84%, #fff));
  --bloom: 0.3;
  --sect: var(--link);
  --glow: 0 1px 0 light-dark(rgb(14 23 38 / 0.12), rgb(0 0 0 / 0.5));
  --glow-hover: 0 4px 12px -4px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.7));
  --shadow: 0 1px 0 light-dark(rgb(14 23 38 / 0.04), rgb(255 255 255 / 0.03)), 0 10px 26px -20px light-dark(rgb(14 23 38 / 0.3), rgb(0 0 0 / 0.9));
  --pop: 0 20px 40px -16px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.9));
  --pop-up: 0 -6px 24px light-dark(rgb(14 23 38 / 0.14), rgb(0 0 0 / 0.45));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: light-dark(transparent, rgb(255 255 255 / 0.04));
  --scan: transparent;
  --raster: transparent;
  --ask-bg: var(--card);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--band);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --faint-ink: var(--ink-3);
  --on-vera: light-dark(#FFFFFF, #161513);  /* words on Vera's green fill: white holds 4.5:1 where the look's own on-bright does not */
}

[data-theme="fjord"] {
  color-scheme: light dark;
  --paper: light-dark(#EEF2F6, #0F141B);
  --paper-2: light-dark(#DFE6ED, #1A212B);
  --card: light-dark(#FFFFFF, #161C25);
  --field: light-dark(#FFFFFF, #161C25);
  --line: light-dark(#C3CDD7, #2A323D);
  --line-2: light-dark(#A6B2BF, #3C4652);
  --edge: light-dark(#6B7886, #7A8796);
  --ink: light-dark(#161C24, #E6ECF2);
  --ink-2: light-dark(#37424F, #BCC6D1);
  --ink-3: light-dark(#52606E, #94A0AD);
  --band: light-dark(#252B4A, #272E52);
  --band-hi: light-dark(#323A60, #333B66);
  --band-line: light-dark(#3B4268, #3C4472);
  --on-band: light-dark(#FFFFFF, #F2F4FA);
  --on-band-2: #BEC4DE;
  --here: light-dark(#FFFFFF, #F2F4FA);
  --on-here: light-dark(#252B4A, #272E52);
  --here-icon: light-dark(#252B4A, #272E52);
  --here-pill: light-dark(#FFFFFF, #F2F4FA);
  --lilac: light-dark(#525FA0, #A2ACF4);
  --cyan: light-dark(#1867BC, #8BB0FF);
  --lemon: light-dark(#6C691F, #BAB365);
  --amber: light-dark(#7A4D00, #F2BA55);
  --pink: light-dark(#775C8A, #C3A6D8);
  --orange: light-dark(#9D5400, #F49C4D);
  --red: light-dark(#B42318, #FF8B74);
  --on-bright: light-dark(#FFFFFF, #0F141B);
  --ok: light-dark(#17703F, #7FE3A5);
  --vera: light-dark(#0A6A4B, #6DFF9C);
  --vera-bg: light-dark(#0B8457, #4FE08A);
  --cursor: light-dark(#12945A, #6DFF9C);
  --link: light-dark(#2A3C8F, #AFC0FF);
  --primary: light-dark(#2C3A80, #B4C3FF);
  --on-primary: light-dark(#FFFFFF, #0F141B);
  --focus: light-dark(#2F55D4, #9FB6FF);
  --lit: light-dark(#2F55D4, #9FB6FF);
  --today: light-dark(#0B8457, #6DFF9C);
  --on-today: light-dark(#FFFFFF, #11241A);
  --today-rule: light-dark(#0A6A4B, #6DFF9C);
  --today-wash: light-dark(#E3F3EA, #11241A);
  --person: #4C86DF;
  --on-person: light-dark(#161C24, #0F141B);
  --error-ink: light-dark(#B42318, #FF8B74);
  --primary-hover: light-dark(color-mix(in srgb, var(--primary) 86%, #000), color-mix(in srgb, var(--primary) 84%, #fff));
  --bloom: 0.3;
  --sect: var(--link);
  --glow: 0 1px 0 light-dark(rgb(14 23 38 / 0.12), rgb(0 0 0 / 0.5));
  --glow-hover: 0 4px 12px -4px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.7));
  --shadow: 0 1px 0 light-dark(rgb(14 23 38 / 0.04), rgb(255 255 255 / 0.03)), 0 10px 26px -20px light-dark(rgb(14 23 38 / 0.3), rgb(0 0 0 / 0.9));
  --pop: 0 20px 40px -16px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.9));
  --pop-up: 0 -6px 24px light-dark(rgb(14 23 38 / 0.14), rgb(0 0 0 / 0.45));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: light-dark(transparent, rgb(255 255 255 / 0.04));
  --scan: transparent;
  --raster: transparent;
  --ask-bg: var(--card);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--band);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --faint-ink: var(--ink-3);
}

[data-theme="ink"] {
  color-scheme: light dark;
  --paper: light-dark(#FFFFFF, #121212);
  --paper-2: light-dark(#F0F0F0, #1F1F1F);
  --card: light-dark(#FFFFFF, #1A1A1A);
  --field: light-dark(#FFFFFF, #1C1C1C);
  --line: light-dark(#D0D0D0, #333333);
  --line-2: light-dark(#ABABAB, #4D4D4D);
  --edge: light-dark(#767676, #8A8A8A);
  --ink: light-dark(#000000, #FFFFFF);
  --ink-2: light-dark(#333333, #CCCCCC);
  --ink-3: light-dark(#5C5C5C, #A3A3A3);
  --band: #000000;
  --band-hi: light-dark(#1A1A1A, #1C1C1C);
  --band-line: light-dark(#333333, #3D3D3D);
  --on-band: #FFFFFF;
  --on-band-2: #B8B8B8;
  --here: #FFFFFF;
  --on-here: #000000;
  --here-icon: #000000;
  --here-pill: #FFFFFF;
  --lilac: light-dark(#7B35E8, #C2A6FF);
  --cyan: light-dark(#2A16D6, #A9B4FF);
  --lemon: light-dark(#6F5900, #FFD84F);
  --amber: light-dark(#000000, #FFFFFF);
  --pink: light-dark(#6B0781, #DDA4F0);
  --orange: light-dark(#9E4D00, #FFA868);
  --red: light-dark(#D60000, #FF5A4F);
  --on-bright: light-dark(#FFFFFF, #000000);
  --ok: light-dark(#000000, #FFFFFF);
  --vera: light-dark(#0A6A4B, #6DFF9C);
  --vera-bg: light-dark(#0B8457, #4FE08A);
  --cursor: light-dark(#12945A, #6DFF9C);
  --link: light-dark(#000000, #FFFFFF);
  --primary: light-dark(#000000, #FFFFFF);
  --on-primary: light-dark(#FFFFFF, #000000);
  --focus: light-dark(#000000, #FFFFFF);
  --lit: light-dark(#2A16D6, #A9B4FF);
  --today: light-dark(#0B8457, #6DFF9C);
  --on-today: light-dark(#FFFFFF, #121212);
  --today-rule: light-dark(#0A6A4B, #6DFF9C);
  --today-wash: light-dark(#E3F3EA, #11241A);
  --person: light-dark(#2A16D6, #5A49E2);
  --on-person: #FFFFFF;
  --error-ink: light-dark(#D60000, #FF5A4F);
  --primary-hover: light-dark(#333333, #E0E0E0);
  --bloom: 0;
  --sect: var(--link);
  --glow: 0 1px 0 light-dark(rgb(14 23 38 / 0.12), rgb(0 0 0 / 0.5));
  --glow-hover: 0 4px 12px -4px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.7));
  --shadow: 0 1px 0 light-dark(rgb(14 23 38 / 0.04), rgb(255 255 255 / 0.03)), 0 10px 26px -20px light-dark(rgb(14 23 38 / 0.3), rgb(0 0 0 / 0.9));
  --pop: 0 20px 40px -16px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.9));
  --pop-up: 0 -6px 24px light-dark(rgb(14 23 38 / 0.14), rgb(0 0 0 / 0.45));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: light-dark(transparent, rgb(255 255 255 / 0.04));
  --scan: transparent;
  --raster: transparent;
  --ask-bg: var(--card);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--band);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --faint-ink: var(--ink-3);
}

[data-theme="homecomputer"] {
  color-scheme: light dark;
  --paper: light-dark(#E3E1DC, #171513);
  --paper-2: light-dark(#D4D1CA, #23201C);
  --card: light-dark(#F6F5F2, #1E1B18);
  --field: light-dark(#F8F7F4, #211E1A);
  --line: light-dark(#BAB6AE, #37322C);
  --line-2: light-dark(#A29D94, #4B453E);
  --edge: light-dark(#6C665E, #8A8378);
  --ink: light-dark(#1D1915, #EEEAE3);
  --ink-2: light-dark(#3D3731, #CBC4BA);
  --ink-3: light-dark(#575049, #A59D92);
  --band: light-dark(#231C17, #2E251E);
  --band-hi: light-dark(#322921, #3B3027);
  --band-line: light-dark(#3C3229, #463A30);
  --on-band: light-dark(#F3F0EA, #F5F1EA);
  --on-band-2: light-dark(#C4BBAF, #C9BFB2);
  --here: light-dark(#F07C1E, #F57F22);
  --on-here: light-dark(#1D1915, #171513);
  --here-icon: light-dark(#1D1915, #171513);
  --here-pill: light-dark(#F07C1E, #F57F22);
  --lilac: light-dark(#6A47A0, #CDB5FA);
  --cyan: light-dark(#2452C2, #9EBBFF);
  --lemon: light-dark(#7C4F00, #EBC15A);
  --amber: light-dark(#8F3E00, #FF9B4D);
  --pink: light-dark(#4E2A6E, #C9B0E6);
  --orange: light-dark(#8F3E00, #FF9B4D);
  --red: light-dark(#B0241A, #FF8B74);
  --on-bright: light-dark(#F6F5F2, #171513);
  --ok: light-dark(#17703F, #7FE3A5);
  --vera: light-dark(#0A6A4B, #6DFF9C);
  --vera-bg: light-dark(#0B8457, #4FE08A);
  --cursor: light-dark(#12945A, #6DFF9C);
  --link: light-dark(#1D1915, #EEEAE3);
  --primary: light-dark(#F07C1E, #F57F22);
  --on-primary: light-dark(#1D1915, #171513);
  --focus: light-dark(#1D1915, #EEEAE3);
  --lit: light-dark(#F07C1E, #F57F22);
  --today: light-dark(#F07C1E, #F57F22);
  --on-today: light-dark(#1D1915, #171513);
  --today-rule: light-dark(#9A4300, #F57F22);
  --today-wash: light-dark(#EDD8C0, #2B1F12);
  --person: light-dark(#2F5FD0, #3565D7);
  --on-person: #FFFFFF;
  --error-ink: light-dark(#B0241A, #FF8B74);
  --primary-hover: light-dark(#F69540, #FF9A4A);
  --bloom: 0.4;
  --sect: var(--link);
  --glow: 0 1px 0 light-dark(rgb(14 23 38 / 0.12), rgb(0 0 0 / 0.5));
  --glow-hover: 0 4px 12px -4px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.7));
  --shadow: 0 1px 0 light-dark(rgb(14 23 38 / 0.04), rgb(255 255 255 / 0.03)), 0 10px 26px -20px light-dark(rgb(14 23 38 / 0.3), rgb(0 0 0 / 0.9));
  --pop: 0 20px 40px -16px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.9));
  --pop-up: 0 -6px 24px light-dark(rgb(14 23 38 / 0.14), rgb(0 0 0 / 0.45));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: light-dark(transparent, rgb(255 255 255 / 0.04));
  --scan: transparent;
  --raster: transparent;
  --ask-bg: var(--card);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--band);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --faint-ink: var(--ink-3);
  --on-vera: light-dark(#FFFFFF, #171513);  /* words on Vera's green fill: white holds 4.5:1 where the look's own on-bright does not */
}

[data-theme="midnight"] {
  color-scheme: light dark;
  --paper: light-dark(#EEF1F7, #0B1020);
  --paper-2: light-dark(#E0E4EE, #161D30);
  --card: light-dark(#FFFFFF, #121A2B);
  --field: light-dark(#FFFFFF, #0E1526);
  --line: light-dark(#C4CAD8, #262F47);
  --line-2: light-dark(#A8B0C3, #36405C);
  --edge: light-dark(#6C7489, #7884A3);
  --ink: light-dark(#0B1020, #E3E8F3);
  --ink-2: light-dark(#353D52, #B7C0D5);
  --ink-3: light-dark(#4E576D, #939DB6);
  --band: light-dark(#0A0F1E, #04060D);
  --band-hi: light-dark(#182036, #121829);
  --band-line: light-dark(#222A42, #1C2338);
  --on-band: light-dark(#FFFFFF, #EEF1F8);
  --on-band-2: light-dark(#AEB7CC, #A6B0C8);
  --here: light-dark(#FFFFFF, #EEF1F8);
  --on-here: light-dark(#0A0F1E, #04060D);
  --here-icon: light-dark(#0A0F1E, #04060D);
  --here-pill: light-dark(#FFFFFF, #EEF1F8);
  --lilac: light-dark(#5144A0, #C5C4FE);
  --cyan: light-dark(#425FA7, #B2CAFF);
  --lemon: light-dark(#7D5C04, #F5C250);
  --amber: light-dark(#8A4B00, #F6B04A);
  --pink: light-dark(#614978, #D9BCF6);
  --orange: light-dark(#8D5320, #F6BD92);
  --red: light-dark(#B42318, #FF7369);
  --on-bright: light-dark(#FFFFFF, #0B1020);
  --ok: light-dark(#17703F, #7FE3A5);
  --vera: light-dark(#0A6A4B, #6DFF9C);
  --vera-bg: light-dark(#0B8457, #4FE08A);
  --cursor: light-dark(#12945A, #6DFF9C);
  --link: light-dark(#0B1020, #E3E8F3);
  --primary: light-dark(#0B1020, #E3E8F3);
  --on-primary: light-dark(#FFFFFF, #0B1020);
  --focus: light-dark(#2D4FC4, #9DB9FF);
  --lit: light-dark(#2D4FC4, #9DB9FF);
  --today: light-dark(#0B8457, #6DFF9C);
  --on-today: light-dark(#FFFFFF, #0B1020);
  --today-rule: light-dark(#0A6A4B, #6DFF9C);
  --today-wash: light-dark(#E1F2E8, #0E2219);
  --person: #96B5FB;
  --on-person: #0B1020;
  --error-ink: light-dark(#B42318, #FF7369);
  --primary-hover: light-dark(#252E48, #FFFFFF);
  --bloom: 0.6;
  --glow: 0 0 0 1px color-mix(in srgb, var(--lit) 35%, transparent), 0 8px 28px -10px color-mix(in srgb, var(--lit) 70%, transparent);
  --glow-hover: 0 0 0 1px color-mix(in srgb, var(--lit) 50%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--lit) 85%, transparent);
  --shadow: 0 1px 0 light-dark(rgb(14 23 38 / 0.04), rgb(255 255 255 / 0.03)), 0 10px 26px -20px light-dark(rgb(14 23 38 / 0.3), rgb(0 0 0 / 0.9));
  --pop: 0 20px 40px -16px light-dark(rgb(14 23 38 / 0.35), rgb(0 0 0 / 0.9));
  --pop-up: 0 -6px 24px light-dark(rgb(14 23 38 / 0.14), rgb(0 0 0 / 0.45));
  --wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --wash-faint: color-mix(in srgb, var(--ink) 3%, transparent);
  --shade: color-mix(in srgb, var(--ink) 5%, transparent);
  --hi: light-dark(transparent, rgb(255 255 255 / 0.04));
  --scan: transparent;
  --raster: transparent;
  --ask-bg: var(--card);
  --bar-bg: color-mix(in srgb, var(--card) 92%, transparent);
  --band-tabs: var(--band);
  --paper-3: color-mix(in srgb, var(--paper-2) 86%, var(--ink));
  --faint-ink: var(--ink-3);
}

/* A browser may choose day or night instead of following the device. Phosphor has no day. */
[data-theme]:not([data-theme="phosphor"]):not([data-theme="afterglow"])[data-mode="light"] { color-scheme: light; }
[data-theme]:not([data-theme="phosphor"]):not([data-theme="afterglow"])[data-mode="dark"] { color-scheme: dark; }