/* The colours, fonts and dressing of every theme: the Classic tokens, each picker theme over them,
   light and dark. The components that use them are in app.css; a skin that restyles the components
   (Structured, Mezmo) has its own tokens at the foot of this file and its rules in skin-<name>.css.
   tests/test_accessibility.py reads this file: every text token on every surface it stands on, at 4.5:1. */

  /* ---- Palette: deep ink blue on cool neutrals. Green and red stay reserved for
     good/bad, so the accent never competes with a status colour. ---- */
  :root {
    color-scheme: light;
    --bg: #eef1f4; --surface: #ffffff; --surface-2: #e4e9ee; --surface-3: #ccd5de; --border: #d3dae1;
    --ink: #0f151b; --ink-2: #48545f; --ink-3: #5d6770;
    --accent: #17527e; --accent-strong: #0e3a5c; --accent-tint: #dce8f2;
    --good: #1b7744; --warning: #886114; --critical: #ad3a30;
    --good-tint: #dcefe4; --warning-tint: #f2e8d5; --critical-tint: #f6e1dd;
    --shadow: 0 1px 2px rgba(15,25,35,.05), 0 10px 26px -14px rgba(15,25,35,.18);
    --rule: rgba(15,21,27,.032);
    --font-head: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    /* figures stand in the text's face, lined up (tabular); --mono is the templates' name for it */
    --font-num: var(--font-body); --mono: var(--font-body);
    --radius: 14px;
    --edge: transparent;  /* a box's outline: its shadow lifts it by day, a line by night */
    /* a theme's picture: faded into the line each page opens with (--box-art: Today's date,
       another page's heading), at full size under the opened date (--hero-art), and at the
       front page's foot */
    --box-art: none; --hero-art: none; --front-art: none;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --bg: #0a0d11; --surface: #11161c; --surface-2: #19202a; --surface-3: #27313d; --border: #242d38;
      --ink: #e9eef4; --ink-2: #98a5b3; --ink-3: #828f9d;
      --accent: #58a6e0; --accent-strong: #8cc6f3; --accent-tint: #122839;
      --good: #4bbc76; --warning: #d2ac54; --critical: #e2685a;
      --good-tint: #10281a; --warning-tint: #2c2410; --critical-tint: #301a16;
      --shadow: 0 1px 3px rgba(0,0,0,.5);
      --rule: rgba(88,166,224,.045);
      --edge: var(--border);
    }
  }


  /* ---- Themes (the picker at the foot of the rail). Each sets the same tokens, light and
     dark, and dresses the rail and the page; green and red stay good and bad. ---- */

  /* Holiday: warm sand, dark wood, ocean blue */
  :root[data-theme="holiday"] {
    --bg: #f3e7d3; --surface: #fffaf2; --surface-2: #f1e4cd; --surface-3: #e2cfae; --border: #e6d5b8;
    --ink: #2e2116; --ink-2: #6a5440; --ink-3: #73614e;
    --accent: #0d6f8a; --accent-strong: #0b5468; --accent-tint: #d3eef2;
    --good: #277349; --warning: #8d5c15; --critical: #af3e29;
    --good-tint: #dcf1e2; --warning-tint: #f8e8cc; --critical-tint: #f8ddd4;
    --shadow: 0 1px 2px rgba(92,62,30,.05), 0 10px 26px -14px rgba(92,62,30,.22);
    --font-head: "Fraunces", Georgia, serif; --font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
    --radius: 14px;
    --box-art: var(--page-art) bottom left / 100% 46px no-repeat;
    --hero-art: var(--page-art) bottom left / 100% 84px no-repeat;
    --front-art: var(--page-art) bottom left / 100% 140px no-repeat;
    --rail-bg: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 7px, rgba(255,220,170,.035) 7px 9px, transparent 9px 16px),
               linear-gradient(180deg, #5a3d27 0%, #3e2918 55%, #2d1d10 100%);
    --rail-ink: #f3e3c6; --rail-ink-2: #d8c09b; --rail-ink-3: #b39672; --rail-hover: rgba(255,236,200,.10);
    --rail-active: rgba(125,211,229,.20); --rail-active-ink: #ffffff; --rail-border: #2a1b0f;
    --page-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='120' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C 240 20 480 100 720 60 S 1200 20 1440 60 V120 H0Z' fill='%230e7490' fill-opacity='.10'/%3E%3Cpath d='M0 80 C 260 50 520 115 780 80 S 1240 45 1440 82 V120 H0Z' fill='%230e7490' fill-opacity='.10'/%3E%3C/svg%3E");
    --page-dots: radial-gradient(rgba(150,110,60,.10) 1px, transparent 1.4px);
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="holiday"] {
      --bg: #0b1c24; --surface: #11262f; --surface-2: #183440; --surface-3: #22485a; --border: #1f3d4a;
      --ink: #f4e8d4; --ink-2: #cdbb9f; --ink-3: #a99d8a;
      --accent: #45c6d6; --accent-strong: #8fe3ec; --accent-tint: #0f3b44;
      --good: #58c386; --warning: #e0b15a; --critical: #ef7a5e;
      --good-tint: #0f2c1e; --warning-tint: #33270f; --critical-tint: #3a1d14;
      --shadow: 0 2px 12px rgba(0,0,0,.45);
      --rail-bg: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 7px, rgba(255,220,170,.03) 7px 9px, transparent 9px 16px),
                 linear-gradient(180deg, #3b2718 0%, #26180d 100%);
      --page-dots: radial-gradient(rgba(143,227,236,.06) 1px, transparent 1.4px);
    }
  }

  /* Bamboo: fresh leaves, pale bamboo, soft and round */
  :root[data-theme="bamboo"] {
    --bg: #f1f5e4; --surface: #fdfff6; --surface-2: #e7efd2; --surface-3: #d3e0b3; --border: #dbe5c2;
    --ink: #1d2b16; --ink-2: #4d5f3d; --ink-3: #5d694f;
    --accent: #367829; --accent-strong: #2a6420; --accent-tint: #e0f1d4;
    --good: #13775e; --warning: #896314; --critical: #ad4234;
    --good-tint: #d7f0e7; --warning-tint: #f6ebcf; --critical-tint: #f7dfd9;
    --shadow: 0 1px 2px rgba(62,96,30,.05), 0 10px 26px -14px rgba(62,96,30,.22);
    --font-head: "Quicksand", "Nunito", ui-sans-serif, sans-serif; --font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
    --radius: 16px;
    --box-art: var(--page-art) right -8px top -22px / 150px 150px no-repeat;
    --hero-art: var(--page-art) bottom right / 210px 210px no-repeat;
    --front-art: var(--page-art) bottom right / 300px 300px no-repeat;
    --rail-bg: repeating-linear-gradient(180deg, transparent 0 132px, rgba(88,110,30,.38) 132px 135px, rgba(255,255,230,.5) 135px 137px),
               repeating-linear-gradient(90deg, rgba(120,150,40,.00) 0 12px, rgba(120,150,40,.10) 12px 14px, rgba(120,150,40,.0) 14px 30px),
               linear-gradient(90deg, #cfdd8e 0%, #e4edb1 45%, #cbd984 100%);
    --rail-ink: #253517; --rail-ink-2: #3f5326; --rail-ink-3: #6a7d45; --rail-hover: rgba(255,255,240,.45);
    --rail-active: rgba(62,138,47,.18); --rail-active-ink: #1f4e17; --rail-border: #bccb78;
    --page-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%233e8a2f'%3E%3Cpath fill-opacity='.13' d='M250 20 C 170 30 120 80 110 150 C 170 130 220 90 250 20Z'/%3E%3Cpath fill-opacity='.10' d='M255 120 C 190 115 140 150 120 210 C 180 205 230 175 255 120Z'/%3E%3Cpath fill-opacity='.09' d='M190 250 C 170 200 130 175 80 175 C 95 220 135 250 190 250Z'/%3E%3C/g%3E%3Cpath d='M250 20 Q 170 70 110 150 M255 120 Q 185 160 120 210 M190 250 Q 140 205 80 175' stroke='%232a6420' stroke-opacity='.18' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    --page-dots: none;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="bamboo"] {
      --bg: #0d1710; --surface: #132016; --surface-2: #1a2c1d; --surface-3: #274229; --border: #223825;
      --ink: #e6f1d9; --ink-2: #b4c7a0; --ink-3: #8fa186;
      --accent: #8ad36a; --accent-strong: #b9ec9e; --accent-tint: #1d3a17;
      --good: #4fcfa6; --warning: #e0b75c; --critical: #ef7a68;
      --good-tint: #0f2c24; --warning-tint: #33290f; --critical-tint: #3a1d17;
      --shadow: 0 2px 12px rgba(0,0,0,.45);
      --rail-bg: repeating-linear-gradient(180deg, transparent 0 132px, rgba(0,0,0,.35) 132px 135px, rgba(200,230,140,.12) 135px 137px),
                 linear-gradient(90deg, #2b3b17 0%, #3a4d1f 45%, #2a3915 100%);
      --rail-ink: #e4efc9; --rail-ink-2: #c3d49c; --rail-ink-3: #93a66c; --rail-hover: rgba(230,245,200,.08);
      --rail-active: rgba(138,211,106,.20); --rail-active-ink: #f3ffe6; --rail-border: #1c2a10;
    }
  }


  /* Fjord: glacier water, mountain grey, a red cabin */
  :root[data-theme="fjord"] {
    --bg: #e8eef2; --surface: #fbfdfe; --surface-2: #dde6ec; --surface-3: #c3d0da; --border: #d0dbe3;
    --ink: #14222d; --ink-2: #435768; --ink-3: #586874;
    --accent: #1e6d8a; --accent-strong: #134e64; --accent-tint: #d6ebf2;
    --good: #217351; --warning: #885d10; --critical: #b13e2d;
    --good-tint: #d9efe4; --warning-tint: #f4e9d2; --critical-tint: #f6dfda;
    --shadow: 0 1px 2px rgba(20,50,70,.05), 0 10px 26px -14px rgba(20,50,70,.22);
    --font-head: "Libre Franklin", ui-sans-serif, system-ui, sans-serif; --font-body: "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
    --radius: 14px;
    --box-art: var(--page-art) bottom left / 100% 60px no-repeat;
    --hero-art: var(--page-art) bottom left / 100% 120px no-repeat;
    --front-art: var(--page-art) bottom left / 100% 170px no-repeat;
    --rail-bg: linear-gradient(180deg, #2f4a5c 0%, #22394a 55%, #17293a 100%);
    --rail-ink: #eef5f9; --rail-ink-2: #c4d6e2; --rail-ink-3: #8ea7b8; --rail-hover: rgba(214,235,242,.10);
    --rail-active: rgba(126,196,224,.22); --rail-active-ink: #ffffff; --rail-border: #142635;
    --page-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='160' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160 L0 110 L120 60 L200 95 L330 30 L450 100 L560 70 L700 120 L820 50 L960 105 L1080 40 L1220 100 L1340 75 L1440 95 L1440 160Z' fill='%231e6f8c' fill-opacity='.08'/%3E%3Cpath d='M0 160 L0 130 L160 100 L300 125 L420 90 L600 135 L760 105 L900 130 L1060 95 L1240 128 L1440 110 L1440 160Z' fill='%231e6f8c' fill-opacity='.08'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="fjord"] {
      --bg: #0c141a; --surface: #121d25; --surface-2: #192832; --surface-3: #263a48; --border: #22333f;
      --ink: #e7f0f5; --ink-2: #a7bac7; --ink-3: #899aa7;
      --accent: #5fb7d6; --accent-strong: #9bd6ea; --accent-tint: #123341;
      --good: #4fc28b; --warning: #d8ae55; --critical: #e67462;
      --good-tint: #0f2b20; --warning-tint: #30260f; --critical-tint: #361b16;
      --shadow: 0 2px 12px rgba(0,0,0,.45);
      --rail-bg: linear-gradient(180deg, #1b2c38 0%, #111e28 100%);
    }
  }

  /* Autumn: amber, rust and falling maple leaves */
  :root[data-theme="autumn"] {
    --bg: #f6ede2; --surface: #fffaf4; --surface-2: #f1e3d2; --surface-3: #e3cbb0; --border: #e8d6c1;
    --ink: #2b1b12; --ink-2: #6b4b36; --ink-3: #755e4d;
    --accent: #a44c19; --accent-strong: #8a3c10; --accent-tint: #f8e1d0;
    --good: #387234; --warning: #885e15; --critical: #b3372c;
    --good-tint: #e0eed9; --warning-tint: #f6e8cd; --critical-tint: #f5dad5;
    --shadow: 0 1px 2px rgba(110,60,20,.05), 0 10px 26px -14px rgba(110,60,20,.22);
    --font-head: "Lora", Georgia, serif; --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
    --radius: 12px;
    --box-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 76'%3E%3Cpath transform='translate(40 30) rotate(-25) scale(0.55)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23c9a227' fill-opacity='.22'/%3E%3Cpath transform='translate(128 52) rotate(35) scale(0.8)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23d9822b' fill-opacity='.20'/%3E%3Cpath transform='translate(214 24) rotate(160) scale(0.6)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23b5541c' fill-opacity='.20'/%3E%3Cpath transform='translate(300 50) rotate(-60) scale(0.95)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23c9a227' fill-opacity='.20'/%3E%3Cpath transform='translate(392 28) rotate(20) scale(0.7)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23d9822b' fill-opacity='.22'/%3E%3Cpath transform='translate(474 54) rotate(110) scale(0.85)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23b5541c' fill-opacity='.20'/%3E%3C/svg%3E") right 34px top / auto 76px no-repeat;
    --hero-art: var(--page-art) bottom right / 230px 230px no-repeat;
    --front-art: var(--page-art) bottom right / 320px 320px no-repeat;
    --rail-bg: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px),
               linear-gradient(180deg, #8a3c10 0%, #6e2f0e 50%, #4f210a 100%);
    --rail-ink: #fff1e2; --rail-ink-2: #f3cfaa; --rail-ink-3: #d3a47a; --rail-hover: rgba(255,225,190,.12);
    --rail-active: rgba(255,196,120,.22); --rail-active-ink: #ffffff; --rail-border: #3e1a08;
    --page-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg%3E%3Cpath transform='translate(200 40) rotate(20)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23d9822b' fill-opacity='.20'/%3E%3Cpath transform='translate(90 150) rotate(-25) scale(.8)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23b5541c' fill-opacity='.16'/%3E%3Cpath transform='translate(220 210) rotate(50) scale(1.1)' d='M0 -26 L5 -15 L13 -19 L11 -9 L23 -11 L17 -1 L25 5 L11 7 L13 17 L4 12 L1 22 L1 34 L-1 34 L-1 22 L-4 12 L-13 17 L-11 7 L-25 5 L-17 -1 L-23 -11 L-11 -9 L-13 -19 L-5 -15Z' fill='%23c9a227' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="autumn"] {
      --bg: #140d09; --surface: #1d140e; --surface-2: #281b13; --surface-3: #3b281c; --border: #33241a;
      --ink: #f6e8da; --ink-2: #cfae92; --ink-3: #a28b79;
      --accent: #ec8a4b; --accent-strong: #f7b58a; --accent-tint: #3b1f10;
      --good: #7cc070; --warning: #e3b65c; --critical: #ee7a68;
      --good-tint: #1a2c15; --warning-tint: #33260f; --critical-tint: #3a1b16;
      --shadow: 0 2px 12px rgba(0,0,0,.5);
      --rail-bg: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 22px),
                 linear-gradient(180deg, #4a200b 0%, #2c1307 100%);
    }
  }

  /* Northern lights: a night sky with the aurora -- dark by day too, only a little lighter */
  :root[data-theme="aurora"] {
    color-scheme: dark;
    --bg: #0f1a2b; --surface: #16233a; --surface-2: #1d2e4a; --surface-3: #2b4064; --border: #263a5a;
    --ink: #eaf2ff; --ink-2: #aebfdd; --ink-3: #8f9eba;
    --accent: #5ee3b1; --accent-strong: #a6f5d6; --accent-tint: #15384a;
    --good: #5ee3b1; --warning: #f2c46b; --critical: #ff7f8f;
    --good-tint: #123b37; --warning-tint: #3a3018; --critical-tint: #3f1c2a;
    --shadow: 0 2px 16px rgba(0,0,0,.45);
    --font-head: "Space Grotesk", ui-sans-serif, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --radius: 14px;
    --edge: var(--border);
    --hero-art: radial-gradient(560px 260px at 0% 0%, rgba(94,227,177,.20), transparent 70%),
                radial-gradient(520px 260px at 100% 100%, rgba(168,120,255,.20), transparent 70%);
    --box-art: radial-gradient(420px 120px at 0% 0%, rgba(94,227,177,.22), transparent 70%),
                radial-gradient(420px 120px at 100% 100%, rgba(168,120,255,.24), transparent 70%);
    --rail-bg: radial-gradient(120% 40% at 30% 18%, rgba(94,227,177,.30), transparent 60%),
               radial-gradient(90% 30% at 80% 32%, rgba(168,120,255,.28), transparent 65%),
               linear-gradient(180deg, #0b1424 0%, #0e1b30 60%, #0a1220 100%);
    --rail-ink: #eaf2ff; --rail-ink-2: #b9c8e6; --rail-ink-3: #7f93b8; --rail-hover: rgba(166,245,214,.08);
    --rail-active: rgba(94,227,177,.18); --rail-active-ink: #d9fff0; --rail-border: #0a1220;
    --page-art: radial-gradient(1200px 300px at 20% -60px, rgba(94,227,177,.16), transparent 70%),
                radial-gradient(900px 260px at 75% -40px, rgba(168,120,255,.14), transparent 70%);
    --page-dots: radial-gradient(rgba(234,242,255,.22) 1px, transparent 1.3px);
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="aurora"] { --bg: #070d18; --surface: #0e172a; --surface-2: #142038; --surface-3: #22345a; --border: #1b2a46; }
  }

  /* Slave: the cell wall. Days chalked up in fives, the jumpsuit's orange, a cake with a
     file in it: an app about getting free, after all. Only here for the smile. */
  :root[data-theme="slave"] {
    --bg: #ebe7df; --surface: #fbf9f4; --surface-2: #f0ebe1; --surface-3: #ddd6c7; --border: #ded7c9;
    --ink: #25221e; --ink-2: #5d574e; --ink-3: #6a6359;
    --accent: #b93d0d; --accent-strong: #a8360a; --accent-tint: #fde4d5;
    --good: #2c7449; --warning: #7f6309; --critical: #b3261e;
    --good-tint: #e0eedd; --warning-tint: #f6edc6; --critical-tint: #f7ddd9;
    --shadow: 0 1px 2px rgba(60,50,30,.06), 0 10px 26px -14px rgba(60,50,30,.22);
    --font-head: "Space Grotesk", ui-sans-serif, sans-serif; --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
    --radius: 8px;
    --rail-bg: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 26px, transparent 26px 52px),
               linear-gradient(180deg, #33302c 0%, #262421 60%, #1d1b19 100%);
    --bar-color: #33302c;  /* the phone's status and browser bar, to meet the top bar */
    --rail-ink: #f4efe6; --rail-ink-2: #cfc8bb; --rail-ink-3: #9a9385; --rail-hover: rgba(255,240,220,.08);
    --rail-active: rgba(226,87,28,.30); --rail-active-ink: #ffffff; --rail-border: #151412;
    --rail-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 190'%3E%3Crect x='52' y='10' width='90' height='70' rx='7' fill='%23a9d3ea'/%3E%3Ccircle cx='121' cy='32' r='10' fill='%23ffd166'/%3E%3Cg stroke='%23151412' stroke-width='5' stroke-linecap='round' fill='none'%3E%3Cline x1='75' y1='10' x2='75' y2='80'/%3E%3Cline x1='97' y1='10' x2='97' y2='80'/%3E%3Cline x1='119' y1='10' x2='119' y2='80'/%3E%3Crect x='52' y='10' width='90' height='70' rx='7'/%3E%3C/g%3E%3Cellipse cx='97' cy='174' rx='64' ry='8' fill='%23d9d2c5' fill-opacity='.9'/%3E%3Cg transform='translate(136 146) rotate(-32)'%3E%3Crect x='0' y='-4' width='44' height='8' rx='2' fill='%23b4bac1'/%3E%3Cpath d='M6 -4v8M12 -4v8M18 -4v8M24 -4v8M30 -4v8M36 -4v8' stroke='%237d848c' stroke-width='1.4'/%3E%3Crect x='42' y='-6.5' width='20' height='13' rx='5' fill='%238a5a2b'/%3E%3C/g%3E%3Crect x='46' y='130' width='102' height='42' rx='9' fill='%23eec39b'/%3E%3Cpath d='M46 142v-4a8 8 0 0 1 8-8h86a8 8 0 0 1 8 8v6c0 5-7 5-7 0 0 8-10 8-10 0 0 6-9 6-9 0 0 9-11 9-11 0 0 5-8 5-8 0 0 8-10 8-10 0 0 6-9 6-9 0 0 9-11 9-11 0 0 5-8 5-8 0 0 6-9 6-9 0z' fill='%23fff6ec'/%3E%3Crect x='68' y='102' width='58' height='30' rx='8' fill='%23eec39b'/%3E%3Cpath d='M68 114v-4a8 8 0 0 1 8-8h42a8 8 0 0 1 8 8v5c0 5-8 5-8 0 0 8-10 8-10 0 0 6-9 6-9 0 0 8-10 8-10 0 0 5-8 5-8 0 0 7-11 7-11 0z' fill='%23fff6ec'/%3E%3Ccircle cx='97' cy='97' r='7' fill='%23e2571c'/%3E%3Cpath d='M97 91c1-6 5-9 10-10' stroke='%232f7d4f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --tally: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 56'%3E%3Cpath d='M6.7 7.4 L9.3 49.6 M18.2 9.5 L19.8 48.9 M32.2 10.5 L27.8 47.7 M42.7 10.6 L39.3 47.5 M1 36.0 L53 15.1 M67.3 7.7 L68.7 44.4 M77.3 9.1 L80.7 48.7 M92.3 6.5 L87.7 44.4 M100.1 9.8 L101.9 49.8 M61 40.7 L113 15.6 M126.9 6.4 L129.1 44.2 M140.5 9.9 L137.5 48.9 M150.1 7.7 L149.9 47.3 M161.8 9.4 L160.2 46.1 M121 40.4 L173 16.0 M186.1 9.6 L189.9 47.8 M197.5 9.9 L200.5 48.0 M209.8 7.5 L210.2 47.4 M219.5 10.4 L222.5 48.6 M181 40.0 L233 12.8 M248.6 9.5 L247.4 46.4 M259.8 9.0 L258.2 47.3 M267.6 7.6 L272.4 48.8 M280.1 7.3 L281.9 47.3 M241 41.1 L293 15.8 M305.6 7.5 L310.4 44.1 M321.2 9.1 L316.8 46.8 M332.3 9.7 L327.7 45.0 M342.2 8.0 L339.8 49.7 M301 41.5 L353 16.9 M366.4 10.5 L369.6 47.9 M376.9 10.4 L381.1 45.6 M389.9 10.8 L390.1 48.0' fill='none' stroke='%234d463b' stroke-opacity='.34' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --box-art: var(--tally) bottom 4px left 14px / auto 13px repeat-x;
    --hero-art: var(--tally) bottom 16px right 22px / var(--hero-art-size, 344px 45px) no-repeat;
    --front-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 56'%3E%3Cpath d='M6.7 7.4 L9.3 49.6 M18.2 9.5 L19.8 48.9 M32.2 10.5 L27.8 47.7 M42.7 10.6 L39.3 47.5 M1 36.0 L53 15.1 M67.3 7.7 L68.7 44.4 M77.3 9.1 L80.7 48.7 M92.3 6.5 L87.7 44.4 M100.1 9.8 L101.9 49.8 M61 40.7 L113 15.6 M126.9 6.4 L129.1 44.2 M140.5 9.9 L137.5 48.9 M150.1 7.7 L149.9 47.3 M161.8 9.4 L160.2 46.1 M121 40.4 L173 16.0 M186.1 9.6 L189.9 47.8 M197.5 9.9 L200.5 48.0 M209.8 7.5 L210.2 47.4 M219.5 10.4 L222.5 48.6 M181 40.0 L233 12.8 M248.6 9.5 L247.4 46.4 M259.8 9.0 L258.2 47.3 M267.6 7.6 L272.4 48.8 M280.1 7.3 L281.9 47.3 M241 41.1 L293 15.8 M305.6 7.5 L310.4 44.1 M321.2 9.1 L316.8 46.8 M332.3 9.7 L327.7 45.0 M342.2 8.0 L339.8 49.7 M301 41.5 L353 16.9 M366.4 10.5 L369.6 47.9 M376.9 10.4 L381.1 45.6 M389.9 10.8 L390.1 48.0' fill='none' stroke='%234d463b' stroke-opacity='.30' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") bottom 28px center / 430px 56px no-repeat;
    --ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 38'%3E%3Cg fill='none' stroke='%23b9b3a8' stroke-width='3'%3E%3Cellipse cx='33' cy='15' rx='6.5' ry='4'/%3E%3Cellipse cx='43' cy='11' rx='6.5' ry='4'/%3E%3Cpath d='M50 9.5a6.5 4 0 0 1 9-3'/%3E%3Cpath d='M62 4l3-3M65 8l4-1'/%3E%3C/g%3E%3Ccircle cx='17' cy='23' r='13' fill='%234a4743'/%3E%3Ccircle cx='12.5' cy='18' r='4' fill='%238d877d' fill-opacity='.7'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark) {
    /* lights out: the same cell, the moon in the window and the chalk lit by it */
    :root[data-theme="slave"] {
      color-scheme: dark;
      --bg: #141517; --surface: #1d1f22; --surface-2: #26292d; --surface-3: #363a40; --border: #2f3237;
      --ink: #efece6; --ink-2: #b4aea3; --ink-3: #97938a;
      --accent: #ff8a4c; --accent-strong: #ffb388; --accent-tint: #3d2214;
      --good: #7fc38a; --warning: #e0bd55; --critical: #ef7a68;
      --good-tint: #1a2d1d; --warning-tint: #332b10; --critical-tint: #3a1b16;
      --shadow: 0 2px 12px rgba(0,0,0,.5);
      --rail-bg: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 26px, transparent 26px 52px),
                 linear-gradient(180deg, #1f1e1c 0%, #131211 100%);
      --bar-color: #1f1e1c;
      --rail-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194 190'%3E%3Crect x='52' y='10' width='90' height='70' rx='7' fill='%231c2b4a'/%3E%3Ccircle cx='121' cy='32' r='10' fill='%23f1ead2'/%3E%3Cg stroke='%230b0a09' stroke-width='5' stroke-linecap='round' fill='none'%3E%3Cline x1='75' y1='10' x2='75' y2='80'/%3E%3Cline x1='97' y1='10' x2='97' y2='80'/%3E%3Cline x1='119' y1='10' x2='119' y2='80'/%3E%3Crect x='52' y='10' width='90' height='70' rx='7'/%3E%3C/g%3E%3Cellipse cx='97' cy='174' rx='64' ry='8' fill='%23d9d2c5' fill-opacity='.9'/%3E%3Cg transform='translate(136 146) rotate(-32)'%3E%3Crect x='0' y='-4' width='44' height='8' rx='2' fill='%23b4bac1'/%3E%3Cpath d='M6 -4v8M12 -4v8M18 -4v8M24 -4v8M30 -4v8M36 -4v8' stroke='%237d848c' stroke-width='1.4'/%3E%3Crect x='42' y='-6.5' width='20' height='13' rx='5' fill='%238a5a2b'/%3E%3C/g%3E%3Crect x='46' y='130' width='102' height='42' rx='9' fill='%23eec39b'/%3E%3Cpath d='M46 142v-4a8 8 0 0 1 8-8h86a8 8 0 0 1 8 8v6c0 5-7 5-7 0 0 8-10 8-10 0 0 6-9 6-9 0 0 9-11 9-11 0 0 5-8 5-8 0 0 8-10 8-10 0 0 6-9 6-9 0 0 9-11 9-11 0 0 5-8 5-8 0 0 6-9 6-9 0z' fill='%23fff6ec'/%3E%3Crect x='68' y='102' width='58' height='30' rx='8' fill='%23eec39b'/%3E%3Cpath d='M68 114v-4a8 8 0 0 1 8-8h42a8 8 0 0 1 8 8v5c0 5-8 5-8 0 0 8-10 8-10 0 0 6-9 6-9 0 0 8-10 8-10 0 0 5-8 5-8 0 0 7-11 7-11 0z' fill='%23fff6ec'/%3E%3Ccircle cx='97' cy='97' r='7' fill='%23e2571c'/%3E%3Cpath d='M97 91c1-6 5-9 10-10' stroke='%232f7d4f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      --tally: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 56'%3E%3Cpath d='M6.7 7.4 L9.3 49.6 M18.2 9.5 L19.8 48.9 M32.2 10.5 L27.8 47.7 M42.7 10.6 L39.3 47.5 M1 36.0 L53 15.1 M67.3 7.7 L68.7 44.4 M77.3 9.1 L80.7 48.7 M92.3 6.5 L87.7 44.4 M100.1 9.8 L101.9 49.8 M61 40.7 L113 15.6 M126.9 6.4 L129.1 44.2 M140.5 9.9 L137.5 48.9 M150.1 7.7 L149.9 47.3 M161.8 9.4 L160.2 46.1 M121 40.4 L173 16.0 M186.1 9.6 L189.9 47.8 M197.5 9.9 L200.5 48.0 M209.8 7.5 L210.2 47.4 M219.5 10.4 L222.5 48.6 M181 40.0 L233 12.8 M248.6 9.5 L247.4 46.4 M259.8 9.0 L258.2 47.3 M267.6 7.6 L272.4 48.8 M280.1 7.3 L281.9 47.3 M241 41.1 L293 15.8 M305.6 7.5 L310.4 44.1 M321.2 9.1 L316.8 46.8 M332.3 9.7 L327.7 45.0 M342.2 8.0 L339.8 49.7 M301 41.5 L353 16.9 M366.4 10.5 L369.6 47.9 M376.9 10.4 L381.1 45.6 M389.9 10.8 L390.1 48.0' fill='none' stroke='%23efece6' stroke-opacity='.26' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
      --box-art: var(--tally) bottom 4px left 14px / auto 13px repeat-x;
      --hero-art: var(--tally) bottom 16px right 22px / var(--hero-art-size, 344px 45px) no-repeat;
      --front-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 56'%3E%3Cpath d='M6.7 7.4 L9.3 49.6 M18.2 9.5 L19.8 48.9 M32.2 10.5 L27.8 47.7 M42.7 10.6 L39.3 47.5 M1 36.0 L53 15.1 M67.3 7.7 L68.7 44.4 M77.3 9.1 L80.7 48.7 M92.3 6.5 L87.7 44.4 M100.1 9.8 L101.9 49.8 M61 40.7 L113 15.6 M126.9 6.4 L129.1 44.2 M140.5 9.9 L137.5 48.9 M150.1 7.7 L149.9 47.3 M161.8 9.4 L160.2 46.1 M121 40.4 L173 16.0 M186.1 9.6 L189.9 47.8 M197.5 9.9 L200.5 48.0 M209.8 7.5 L210.2 47.4 M219.5 10.4 L222.5 48.6 M181 40.0 L233 12.8 M248.6 9.5 L247.4 46.4 M259.8 9.0 L258.2 47.3 M267.6 7.6 L272.4 48.8 M280.1 7.3 L281.9 47.3 M241 41.1 L293 15.8 M305.6 7.5 L310.4 44.1 M321.2 9.1 L316.8 46.8 M332.3 9.7 L327.7 45.0 M342.2 8.0 L339.8 49.7 M301 41.5 L353 16.9 M366.4 10.5 L369.6 47.9 M376.9 10.4 L381.1 45.6 M389.9 10.8 L390.1 48.0' fill='none' stroke='%23efece6' stroke-opacity='.22' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") bottom 28px center / 430px 56px no-repeat;
    }
  }

  /* Structured: a putty gallery, bone cards without edges, black for the one action, a display serif; the rail is the Ink Room, and so is the night. `--accent` is the text-safe colour the components
     use for links (what the test checks); `--action` the fill of a button, `--good`/`--warning`/`--critical` the text
     colours and `--*-fill` the fills, as skin-structured.css uses them. The palette's own names are `--color-*`. */
  :root[data-theme="structured"] {
    --bg: #c4c3b6;
    --surface: #e7e5e4;
    --surface-2: #dfdcd5;
    --surface-3: #c4c3b6;
    --border: #c4c3b6;
    --ink: #000000;
    --ink-2: #45443f;
    --ink-3: #4e4d4a;
    --action: #000000;
    --action-hover: #45443f;
    --on-action: #ffffff;
    --link: #000000;
    --accent: #000000;
    --accent-strong: #000000;
    --focus: #000000;
    --accent-tint: #ebebeb;
    --emphasis: #000000;
    --mark: #000000;
    --input-bg: #ffffff;
    --good-fill: #33502f;
    --good: #33502f;
    --good-tint: #d6d9c8;
    --warning-fill: #5e4510;
    --warning: #5e4510;
    --warning-tint: #e3dac3;
    --critical-fill: #7a2c26;
    --critical: #7a2c26;
    --critical-tint: #e4cfca;
    --rail-ink: #ffffff;
    --rail-ink-2: #c4c3b6;
    --rail-ink-3: #808080;
    --rail-hover: rgba(255,255,255,.08);
    --rail-active: #ffffff;
    --rail-active-ink: #000000;
    --rail-mark: #ffffff;
    --rail-border: #000000;
    --bar-color: #000000;
    --rail-bg: #000000;
    --color-putty: #c4c3b6;
    --color-ink: #000000;
    --color-bone: #e7e5e4;
    --color-chalk: #ebebeb;
    --color-vellum: #dfdcd5;
    --color-graphite: #595855;
    --color-ash: #808080;
    --color-paper: #ffffff;
    --font-head: "Playfair Display", "Davinci", Georgia, serif;
    --font-body: "Inter", "Helvetica Now", ui-sans-serif, system-ui, sans-serif;
    --font-num: "Inter", "Helvetica Now", ui-sans-serif, system-ui, sans-serif;
    --font-label: "Inter", "Helvetica Now", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Playfair Display", "Davinci", Georgia, serif;
    --mono: var(--font-num);
    --radius: 9px;
    --shadow: none;
    --rule: rgba(0,0,0,0);
    --box-art: none;
    --hero-art: none;
    --front-art: none;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="structured"] {
    --bg: #000000;
    --surface: #000000;
    --surface-2: #171716;
    --surface-3: #333330;
    --border: #3a3a36;
    --ink: #ffffff;
    --ink-2: #c4c3b6;
    --ink-3: #8f8f8f;
    --action: #ffffff;
    --action-hover: #c4c3b6;
    --on-action: #000000;
    --link: #ffffff;
    --accent: #ffffff;
    --accent-strong: #ffffff;
    --focus: #ffffff;
    --accent-tint: #171716;
    --emphasis: #ffffff;
    --mark: #ffffff;
    --input-bg: #141412;
    --good-fill: #9fbf96;
    --good: #9fbf96;
    --good-tint: #1a241a;
    --warning-fill: #d4b36a;
    --warning: #d4b36a;
    --warning-tint: #2a2412;
    --critical-fill: #d98a80;
    --critical: #d98a80;
    --critical-tint: #2e1a18;
    --rail-ink: #ffffff;
    --rail-ink-2: #c4c3b6;
    --rail-ink-3: #808080;
    --rail-hover: rgba(255,255,255,.08);
    --rail-active: #ffffff;
    --rail-active-ink: #000000;
    --rail-mark: #ffffff;
    --rail-border: #2a2a27;
    --bar-color: #000000;
    --rail-bg: #000000;
    --shadow: none;
    }
  }

  /* Mezmo: an observatory at dawn, paper cards with dust hairlines, weight-300 headlines, monospace figures, teal for the one action and iris for the one emphasis. `--accent` is the text-safe colour the components
     use for links (what the test checks); `--action` the fill of a button, `--good`/`--warning`/`--critical` the text
     colours and `--*-fill` the fills, as skin-mezmo.css uses them. The palette's own names are `--color-*`. */
  :root[data-theme="mezmo"] {
    --bg: #e6e6e5;
    --surface: #ffffff;
    --surface-2: #f4f4f4;
    --surface-3: #d1d5db;
    --border: #d1d5db;
    --ink: #0a090c;
    --ink-2: #404040;
    --ink-3: #5a5a5a;
    --action: #96beca;
    --action-hover: #d5e8ed;
    --on-action: #0a090c;
    --link: #3a344b;
    --accent: #3a344b;
    --accent-strong: #3a344b;
    --focus: #3a344b;
    --accent-tint: #d5e8ed;
    --emphasis: #7561b1;
    --mark: #7561b1;
    --rail-mark: #7561b1;
    --input-bg: #ffffff;
    --good-fill: #9db161;
    --good: #4f6a27;
    --good-tint: #edf1e3;
    --warning-fill: #f4b811;
    --warning: #7d5a05;
    --warning-tint: #fdf4d9;
    --critical-fill: #c04040;
    --critical: #a63a3a;
    --critical-tint: #f7e8e8;
    --rail-ink: #0a090c;
    --rail-ink-2: #0a090c;
    --rail-ink-3: #5a5a5a;
    --rail-hover: #f4f4f4;
    --rail-active: #96beca;
    --rail-active-ink: #0a090c;
    --rail-border: #d1d5db;
    --bar-color: #ffffff;
    --rail-bg: #ffffff;
    --color-deep-ink: #0a090c;
    --color-near-black-green: #031403;
    --color-bone-white: #e6e6e5;
    --color-paper-white: #ffffff;
    --color-frost: #f4f4f4;
    --color-stone: #8a8a8a;
    --color-slate: #696969;
    --color-ash: #777777;
    --color-dust: #d1d5db;
    --color-cinder: #2d2d2d;
    --color-smoke: #5a5a5a;
    --color-iron: #404040;
    --color-iris: #7561b1;
    --color-coastal-teal: #96beca;
    --color-slate-blue: #74a9b9;
    --color-amber-glow: #f4b811;
    --color-moss: #9db161;
    --color-lilac-mist: #ccc6df;
    --color-pale-aqua: #d5e8ed;
    --color-sand-sage: #dfe4d1;
    --color-faded-aqua: #b4cfd7;
    --color-dusk: #3a344b;
    --color-lilac-wash: #e7e5ee;
    --color-code-red: #c04040;
    --font-head: "Onest", "Onest Variable", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Onest", "Onest Variable", ui-sans-serif, system-ui, sans-serif;
    --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-label: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --mono: var(--font-num);
    --radius: 8px;
    --shadow: rgba(10, 9, 12, 0.03) 0px 1px 3px 0px;
    --rule: rgba(0,0,0,0);
    --box-art: none;
    --hero-art: none;
    --front-art: none;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="mezmo"] {
    --bg: #0a090c;
    --surface: #2d2d2d;
    --surface-2: #404040;
    --surface-3: #5a5a5a;
    --border: #404040;
    --ink: #ffffff;
    --ink-2: #d1d5db;
    --ink-3: #b3b3b3;
    --action: #96beca;
    --action-hover: #b4cfd7;
    --on-action: #0a090c;
    --link: #b4cfd7;
    --accent: #b4cfd7;
    --accent-strong: #b4cfd7;
    --focus: #b4cfd7;
    --accent-tint: #3e4446;
    --emphasis: #ccc6df;
    --mark: #ccc6df;
    --rail-mark: #ccc6df;
    --input-bg: #0a090c;
    --good-fill: #9db161;
    --good: #c3d49a;
    --good-tint: #414536;
    --warning-fill: #f4b811;
    --warning: #f2c75a;
    --warning-tint: #494029;
    --critical-fill: #e06c6c;
    --critical: #f09a9a;
    --critical-tint: #4a3737;
    --rail-ink: #ffffff;
    --rail-ink-2: #ffffff;
    --rail-ink-3: #b3b3b3;
    --rail-hover: #404040;
    --rail-active: #96beca;
    --rail-active-ink: #0a090c;
    --rail-border: #404040;
    --bar-color: #2d2d2d;
    --rail-bg: #2d2d2d;
    --shadow: none;
    }
  }