/* =========================================================================
   H&T 1.0 — light and dark.

   GENERATED — do not hand-edit; the next build overwrites it. The source, and
   the reasoning behind every pair of values, is in setup/build_theme.php:

       php setup/build_theme.php

   Everything the two themes disagree about is a custom property, and this is
   the only file that holds one. app.css / theme.css / mobile.css lay the
   screens out and never name a colour that has to change.

   HOW A COLOUR KNOWS WHICH WAY TO MOVE. Not by its own value — #fff is a card
   on `background` and button lettering on `color`, and those two go opposite
   ways. It moves by the ROLE it plays, and each role has its own ramp:

     sf     surfaces      keep their order. A card is lighter than the page in
                          both themes; both simply compress into the dark end.
     ink    text          inverts. Near-black becomes near-white; the mid greys
                          barely move, because mid is legible on either ground.
     bd     rules         sit just above the surface they divide.
     tint   washes        keep their hue and swap ends — a green note stays a
                          green note, it just stops being pale.
     on-*   on a wash     the lettering for those washes, moving the other way.

   The navy shell and the saturated brand fills are in NEITHER ramp: they frame
   the page rather than being it, and they carry white lettering, so they hold
   still while everything around them flips.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Surfaces — the page, the cards, the wells and bands inside them */
  --sf-1:            #fff;
  --sf-2:            #f8fafc;
  --sf-3:            #f2f7ff;
  --sf-4:            #fff1f1;
  --sf-5:            #fffaf0;
  --sf-6:            #eefcf3;
  --sf-7:            #eef2f7;
  --sf-8:            #e7f7ec;
  --sf-9:            #e8edf4;
  --sf-10:           #e2e8f0;

  /* Neutral fills — bar tracks, chips, empty states */
  --fill-1:          #dbe2ea;
  --fill-2:          #cbd5e1;
  --fill-3:          #94a3b8;
  --fill-4:          #6d81b5;

  /* Rules and borders */
  --bd-1:            #eef2f7;
  --bd-2:            #e4e9f2;
  --bd-3:            #d8e0ea;
  --bd-4:            #cbd5e1;
  --bd-5:            #94a3b8;

  /* Text */
  --ink-1:           #334155;
  --ink-2:           #475569;
  --ink-3:           #3f7a55;
  --ink-4:           #43567c;
  --ink-5:           #55648a;
  --ink-6:           #64748b;
  --ink-7:           #94a3b8;
  --ink-8:           #8fa3c8;

  /* Coloured washes — the pale ground behind a pill, a note, a panel */
  --tint-blue-1:     #eef4ff;
  --tint-blue-2:     #e8eefc;
  --tint-blue-3:     #e2edff;
  --tint-blue-4:     #dbeafe;
  --tint-blue-5:     #e1eaf8;
  --tint-blue-6:     #dfe6f2;
  --tint-blue-7:     #d7e3f8;
  --tint-blue-8:     #c7d2fe;
  --tint-blue-9:     #cfdcf5;
  --tint-blue-10:    #c7dcfd;
  --tint-blue-11:    #bfdbfe;
  --tint-blue-12:    #cfdcee;
  --tint-blue-13:    #c7d7f0;
  --tint-green-1:    #dcfce7;
  --tint-green-2:    #bbf7d0;
  --tint-amber-4:    #fde3a3;
  --tint-orange-2:   #fed7aa;
  --tint-red-1:      #ffeaea;
  --tint-red-2:      #fee2e2;
  --tint-red-3:      #fdd9d9;
  --tint-red-4:      #fecdd3;
  --tint-red-5:      #fecaca;
  --tint-amber-1:    #fffbeb;
  --tint-amber-2:    #fef3c7;
  --tint-amber-3:    #fef9c3;
  --tint-violet-1:   #ede9fe;
  --tint-violet-2:   #ddd6fe;
  --tint-violet-3:   #cec5fb;
  --tint-violet-4:   #cabffc;
  --tint-orange-1:   #ffedd5;
  --tint-teal-1:     #cffafe;

  /* Lettering on a wash */
  --on-blue-1:       #101a33;
  --on-blue-2:       #1e293b;
  --on-blue-3:       #1e3a8a;
  --on-blue-4:       #24418f;
  --on-blue-5:       #1e40af;
  --on-green-1:      #14532d;
  --on-green-2:      #166534;
  --on-green-3:      #15803d;
  --on-red-1:        #7c2d12;
  --on-red-2:        #991b1b;
  --on-red-3:        #b91c1c;
  --on-orange-1:     #4a2c05;
  --on-orange-2:     #713f12;
  --on-orange-3:     #78350f;
  --on-orange-4:     #92400e;
  --on-orange-5:     #b45309;
  --on-orange-6:     #c2410c;
  --on-teal-1:       #0e7490;
  --on-blue-6:       #1d4ed8;
  --on-violet-1:     #6d28d9;

  /* Coloured rules */
  --edge-blue-1:     #b5d3fb;
  --edge-blue-2:     #b9cdf0;
  --edge-blue-3:     #a9c8f8;
  --edge-blue-4:     #a9c0e8;
  --edge-blue-5:     #93c5fd;
  --edge-green-1:    #bbf7d0;
  --edge-green-2:    #bbe7c9;
  --edge-green-3:    #a7f3c6;
  --edge-green-4:    #9ae7ba;
  --edge-green-5:    #86efac;
  --edge-green-6:    #94d3a8;
  --edge-amber-1:    #f0dda4;
  --edge-amber-2:    #f5d78e;
  --edge-amber-3:    #f2dd68;
  --edge-amber-4:    #fcd34d;
  --edge-red-1:      #fbaeae;
  --edge-red-2:      #fca5a5;
  --edge-red-3:      #fecaca;
  --edge-orange-1:   #fb923c;

  /* The shell — navy in both themes, because it frames the page rather than being it */
  --navy:            #0e1a2e;
  --navy-2:          #16233c;
  --navy-line:       #24334f;

  /* Brand — a FILL keeps its saturation (it carries white lettering); the -ink twin is the
     same hue as TEXT and has to swap ends of the scale instead */
  --blue:            #2563eb;
  --blue-hover:      #1d4ed8;
  --link:            #2563eb;
  --blue-dark:       #1d4ed8;
  --green:           #16a34a;
  --green-ink:       #16a34a;
  --amber:           #b45309;
  --amber-ink:       #b45309;
  --red:             #dc2626;
  --red-ink:         #dc2626;
  --violet:          #7c3aed;
  --violet-ink:      #7c3aed;

  /* Aliases — the names the stylesheets already used, pointed at the ramps above so the two
     can never drift apart */
  --bg:              var(--sf-7);
  --card:            var(--sf-1);
  --line:            var(--bd-2);
  --muted:           var(--ink-6);
  --ink:             #0f172a;
  --blue-soft:       var(--tint-blue-4);
  --green-soft:      var(--tint-green-1);
  --amber-soft:      var(--tint-amber-2);
  --red-soft:        var(--tint-red-2);
  --violet-soft:     var(--tint-violet-1);

  /* The accent wheel (theme.css) — the base hue is a fill and holds still; the -d twin is text
     and lifts, the -s twin is a wash and deepens */
  --c-indigo-d:      #3730a3;
  --c-indigo-s:      #e8e7ff;
  --c-blue-d:        #1d4ed8;
  --c-blue-s:        #dbeafe;
  --c-sky-d:         #0369a1;
  --c-sky-s:         #e0f2fe;
  --c-teal-d:        #0f766e;
  --c-teal-s:        #d6f5f0;
  --c-emerald-d:     #047857;
  --c-emerald-s:     #d7f7e7;
  --c-amber-d:       #b45309;
  --c-amber-s:       #fef3c7;
  --c-orange-d:      #c2410c;
  --c-orange-s:      #ffedd5;
  --c-rose-d:        #be123c;
  --c-rose-s:        #ffe4e8;
  --c-pink-d:        #be185d;
  --c-pink-s:        #fce7f3;
  --c-violet-d:      #6d28d9;
  --c-violet-s:      #ede9fe;
  --kaw:             rgba(37, 99, 235, .07);

  /* Product colours — a fixed categorical order, lifted just enough to hold up on a dark
     ground */
  --pc-1:            #2a78d6;
  --pc-2:            #eb6834;
  --pc-3:            #1baf7a;
  --pc-4:            #4a3aa7;
  --pc-5:            #eda100;
  --pc-6:            #e87ba4;
  --pc-7:            #008300;
  --pc-8:            #e34948;
}

/* An explicit choice, set on <html> by the toggle in the topbar. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — the page, the cards, the wells and bands inside them */
  --sf-1:            #212936;
  --sf-2:            #1a2230;
  --sf-3:            #182233;
  --sf-4:            #2a1a1c;
  --sf-5:            #282017;
  --sf-6:            #16281d;
  --sf-7:            #141b26;
  --sf-8:            #132318;
  --sf-9:            #111823;
  --sf-10:           #0d131c;

  /* Neutral fills — bar tracks, chips, empty states */
  --fill-1:          #45505c;
  --fill-2:          #414b58;
  --fill-3:          #303a47;
  --fill-4:          #293040;

  /* Rules and borders */
  --bd-1:            #2e3746;
  --bd-2:            #2b3442;
  --bd-3:            #333d4d;
  --bd-4:            #3a4557;
  --bd-5:            #4a566b;

  /* Text */
  --ink-1:           #d2d7df;
  --ink-2:           #c9cfd6;
  --ink-3:           #8fd3a8;
  --ink-4:           #aab6cc;
  --ink-5:           #adb8cd;
  --ink-6:           #98a4b6;
  --ink-7:           #8b97a8;
  --ink-8:           #8794aa;

  /* Coloured washes — the pale ground behind a pill, a note, a panel */
  --tint-blue-1:     #1b2740;
  --tint-blue-2:     #1a2540;
  --tint-blue-3:     #1a273f;
  --tint-blue-4:     #19263d;
  --tint-blue-5:     #1a2539;
  --tint-blue-6:     #1a2338;
  --tint-blue-7:     #182339;
  --tint-blue-8:     #1c1f3d;
  --tint-blue-9:     #172236;
  --tint-blue-10:    #162338;
  --tint-blue-11:    #152238;
  --tint-blue-12:    #162135;
  --tint-blue-13:    #152034;
  --tint-green-1:    #173a26;
  --tint-green-2:    #1e4a30;
  --tint-amber-4:    #3f3520;
  --tint-orange-2:   #45331f;
  --tint-red-1:      #3b2020;
  --tint-red-2:      #391e1e;
  --tint-red-3:      #361d1d;
  --tint-red-4:      #341c20;
  --tint-red-5:      #331b1b;
  --tint-amber-1:    #3a3320;
  --tint-amber-2:    #342d1a;
  --tint-amber-3:    #343019;
  --tint-violet-1:   #251f3c;
  --tint-violet-2:   #221d39;
  --tint-violet-3:   #1f1a35;
  --tint-violet-4:   #1e1934;
  --tint-orange-1:   #382c1d;
  --tint-teal-1:     #193337;

  /* Lettering on a wash */
  --on-blue-1:       #93b0e4;
  --on-blue-2:       #93b0e4;
  --on-blue-3:       #93aee6;
  --on-blue-4:       #93aee6;
  --on-blue-5:       #96abe8;
  --on-green-1:      #74d69f;
  --on-green-2:      #74d69f;
  --on-green-3:      #7ad9a4;
  --on-red-1:        #eaa38c;
  --on-red-2:        #f09292;
  --on-red-3:        #f09292;
  --on-orange-1:     #e8b57e;
  --on-orange-2:     #e8b07e;
  --on-orange-3:     #e8ab7e;
  --on-orange-4:     #e8a97e;
  --on-orange-5:     #eab063;
  --on-orange-6:     #eda37e;
  --on-teal-1:       #7fcbdd;
  --on-blue-6:       #93b4f5;
  --on-violet-1:     #b9a5fb;

  /* Coloured rules */
  --edge-blue-1:     #33507c;
  --edge-blue-2:     #324b74;
  --edge-blue-3:     #334e7a;
  --edge-blue-4:     #324a70;
  --edge-blue-5:     #33527f;
  --edge-green-1:    #2c6244;
  --edge-green-2:    #2b5c41;
  --edge-green-3:    #2c6246;
  --edge-green-4:    #2c5e44;
  --edge-green-5:    #2d6445;
  --edge-green-6:    #2a563e;
  --edge-amber-1:    #5e5330;
  --edge-amber-2:    #61532e;
  --edge-amber-3:    #605931;
  --edge-amber-4:    #64552b;
  --edge-red-1:      #6b3a3a;
  --edge-red-2:      #6d3838;
  --edge-red-3:      #5c3030;
  --edge-orange-1:   #7a4a24;

  /* The shell — navy in both themes, because it frames the page rather than being it */
  --navy:            #080d17;
  --navy-2:          #131d30;
  --navy-line:       #1c2740;

  /* Brand — a FILL keeps its saturation (it carries white lettering); the -ink twin is the
     same hue as TEXT and has to swap ends of the scale instead */
  --blue:            #2563eb;
  --blue-hover:      #1d4ed8;
  --link:            #7ab0ff;
  --blue-dark:       #93b4f5;
  --green:           #16a34a;
  --green-ink:       #5ee79a;
  --amber:           #b45309;
  --amber-ink:       #f0b429;
  --red:             #dc2626;
  --red-ink:         #f88b8b;
  --violet:          #7c3aed;
  --violet-ink:      #b9a5fb;

  /* Aliases — the names the stylesheets already used, pointed at the ramps above so the two
     can never drift apart */
  --bg:              var(--sf-7);
  --card:            var(--sf-1);
  --line:            var(--bd-2);
  --muted:           var(--ink-6);
  --ink:             #e7edf7;
  --blue-soft:       var(--tint-blue-4);
  --green-soft:      var(--tint-green-1);
  --amber-soft:      var(--tint-amber-2);
  --red-soft:        var(--tint-red-2);
  --violet-soft:     var(--tint-violet-1);

  /* The accent wheel (theme.css) — the base hue is a fill and holds still; the -d twin is text
     and lifts, the -s twin is a wash and deepens */
  --c-indigo-d:      #a5a0ee;
  --c-indigo-s:      #221f42;
  --c-blue-d:        #93b4f5;
  --c-blue-s:        #19263d;
  --c-sky-d:         #7cc4e8;
  --c-sky-s:         #152b3a;
  --c-teal-d:        #6fcfc5;
  --c-teal-s:        #153330;
  --c-emerald-d:     #5fd3a3;
  --c-emerald-s:     #153528;
  --c-amber-d:       #f0b429;
  --c-amber-s:       #342d1a;
  --c-orange-d:      #eda37e;
  --c-orange-s:      #382c1d;
  --c-rose-d:        #f0879f;
  --c-rose-s:        #391f26;
  --c-pink-d:        #ee8fbc;
  --c-pink-s:        #361f2c;
  --c-violet-d:      #b9a5fb;
  --c-violet-s:      #251f3c;
  --kaw:             rgba(96, 165, 250, .13);

  /* Product colours — a fixed categorical order, lifted just enough to hold up on a dark
     ground */
  --pc-1:            #5c9ee8;
  --pc-2:            #f5854f;
  --pc-3:            #3ecb96;
  --pc-4:            #8b7ce0;
  --pc-5:            #f0b429;
  --pc-6:            #f09cbc;
  --pc-7:            #3aa83a;
  --pc-8:            #ee7776;
}

/* No explicit choice yet — follow the operating system. Guarded on
   :not([data-theme="light"]) so that choosing light on a dark-set machine
   still sticks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

  /* Surfaces — the page, the cards, the wells and bands inside them */
  --sf-1:            #212936;
  --sf-2:            #1a2230;
  --sf-3:            #182233;
  --sf-4:            #2a1a1c;
  --sf-5:            #282017;
  --sf-6:            #16281d;
  --sf-7:            #141b26;
  --sf-8:            #132318;
  --sf-9:            #111823;
  --sf-10:           #0d131c;

  /* Neutral fills — bar tracks, chips, empty states */
  --fill-1:          #45505c;
  --fill-2:          #414b58;
  --fill-3:          #303a47;
  --fill-4:          #293040;

  /* Rules and borders */
  --bd-1:            #2e3746;
  --bd-2:            #2b3442;
  --bd-3:            #333d4d;
  --bd-4:            #3a4557;
  --bd-5:            #4a566b;

  /* Text */
  --ink-1:           #d2d7df;
  --ink-2:           #c9cfd6;
  --ink-3:           #8fd3a8;
  --ink-4:           #aab6cc;
  --ink-5:           #adb8cd;
  --ink-6:           #98a4b6;
  --ink-7:           #8b97a8;
  --ink-8:           #8794aa;

  /* Coloured washes — the pale ground behind a pill, a note, a panel */
  --tint-blue-1:     #1b2740;
  --tint-blue-2:     #1a2540;
  --tint-blue-3:     #1a273f;
  --tint-blue-4:     #19263d;
  --tint-blue-5:     #1a2539;
  --tint-blue-6:     #1a2338;
  --tint-blue-7:     #182339;
  --tint-blue-8:     #1c1f3d;
  --tint-blue-9:     #172236;
  --tint-blue-10:    #162338;
  --tint-blue-11:    #152238;
  --tint-blue-12:    #162135;
  --tint-blue-13:    #152034;
  --tint-green-1:    #173a26;
  --tint-green-2:    #1e4a30;
  --tint-amber-4:    #3f3520;
  --tint-orange-2:   #45331f;
  --tint-red-1:      #3b2020;
  --tint-red-2:      #391e1e;
  --tint-red-3:      #361d1d;
  --tint-red-4:      #341c20;
  --tint-red-5:      #331b1b;
  --tint-amber-1:    #3a3320;
  --tint-amber-2:    #342d1a;
  --tint-amber-3:    #343019;
  --tint-violet-1:   #251f3c;
  --tint-violet-2:   #221d39;
  --tint-violet-3:   #1f1a35;
  --tint-violet-4:   #1e1934;
  --tint-orange-1:   #382c1d;
  --tint-teal-1:     #193337;

  /* Lettering on a wash */
  --on-blue-1:       #93b0e4;
  --on-blue-2:       #93b0e4;
  --on-blue-3:       #93aee6;
  --on-blue-4:       #93aee6;
  --on-blue-5:       #96abe8;
  --on-green-1:      #74d69f;
  --on-green-2:      #74d69f;
  --on-green-3:      #7ad9a4;
  --on-red-1:        #eaa38c;
  --on-red-2:        #f09292;
  --on-red-3:        #f09292;
  --on-orange-1:     #e8b57e;
  --on-orange-2:     #e8b07e;
  --on-orange-3:     #e8ab7e;
  --on-orange-4:     #e8a97e;
  --on-orange-5:     #eab063;
  --on-orange-6:     #eda37e;
  --on-teal-1:       #7fcbdd;
  --on-blue-6:       #93b4f5;
  --on-violet-1:     #b9a5fb;

  /* Coloured rules */
  --edge-blue-1:     #33507c;
  --edge-blue-2:     #324b74;
  --edge-blue-3:     #334e7a;
  --edge-blue-4:     #324a70;
  --edge-blue-5:     #33527f;
  --edge-green-1:    #2c6244;
  --edge-green-2:    #2b5c41;
  --edge-green-3:    #2c6246;
  --edge-green-4:    #2c5e44;
  --edge-green-5:    #2d6445;
  --edge-green-6:    #2a563e;
  --edge-amber-1:    #5e5330;
  --edge-amber-2:    #61532e;
  --edge-amber-3:    #605931;
  --edge-amber-4:    #64552b;
  --edge-red-1:      #6b3a3a;
  --edge-red-2:      #6d3838;
  --edge-red-3:      #5c3030;
  --edge-orange-1:   #7a4a24;

  /* The shell — navy in both themes, because it frames the page rather than being it */
  --navy:            #080d17;
  --navy-2:          #131d30;
  --navy-line:       #1c2740;

  /* Brand — a FILL keeps its saturation (it carries white lettering); the -ink twin is the
     same hue as TEXT and has to swap ends of the scale instead */
  --blue:            #2563eb;
  --blue-hover:      #1d4ed8;
  --link:            #7ab0ff;
  --blue-dark:       #93b4f5;
  --green:           #16a34a;
  --green-ink:       #5ee79a;
  --amber:           #b45309;
  --amber-ink:       #f0b429;
  --red:             #dc2626;
  --red-ink:         #f88b8b;
  --violet:          #7c3aed;
  --violet-ink:      #b9a5fb;

  /* Aliases — the names the stylesheets already used, pointed at the ramps above so the two
     can never drift apart */
  --bg:              var(--sf-7);
  --card:            var(--sf-1);
  --line:            var(--bd-2);
  --muted:           var(--ink-6);
  --ink:             #e7edf7;
  --blue-soft:       var(--tint-blue-4);
  --green-soft:      var(--tint-green-1);
  --amber-soft:      var(--tint-amber-2);
  --red-soft:        var(--tint-red-2);
  --violet-soft:     var(--tint-violet-1);

  /* The accent wheel (theme.css) — the base hue is a fill and holds still; the -d twin is text
     and lifts, the -s twin is a wash and deepens */
  --c-indigo-d:      #a5a0ee;
  --c-indigo-s:      #221f42;
  --c-blue-d:        #93b4f5;
  --c-blue-s:        #19263d;
  --c-sky-d:         #7cc4e8;
  --c-sky-s:         #152b3a;
  --c-teal-d:        #6fcfc5;
  --c-teal-s:        #153330;
  --c-emerald-d:     #5fd3a3;
  --c-emerald-s:     #153528;
  --c-amber-d:       #f0b429;
  --c-amber-s:       #342d1a;
  --c-orange-d:      #eda37e;
  --c-orange-s:      #382c1d;
  --c-rose-d:        #f0879f;
  --c-rose-s:        #391f26;
  --c-pink-d:        #ee8fbc;
  --c-pink-s:        #361f2c;
  --c-violet-d:      #b9a5fb;
  --c-violet-s:      #251f3c;
  --kaw:             rgba(96, 165, 250, .13);

  /* Product colours — a fixed categorical order, lifted just enough to hold up on a dark
     ground */
  --pc-1:            #5c9ee8;
  --pc-2:            #f5854f;
  --pc-3:            #3ecb96;
  --pc-4:            #8b7ce0;
  --pc-5:            #f0b429;
  --pc-6:            #f09cbc;
  --pc-7:            #3aa83a;
  --pc-8:            #ee7776;
  }
}

/* Paper is always paper. A challan printed at 9pm must not come out of the
   tray with a black background, so print resets the table to its light values
   whatever the screen is doing. */
@media print {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    color-scheme: light;

    /* Surfaces — the page, the cards, the wells and bands inside them */
    --sf-1:            #fff;
    --sf-2:            #f8fafc;
    --sf-3:            #f2f7ff;
    --sf-4:            #fff1f1;
    --sf-5:            #fffaf0;
    --sf-6:            #eefcf3;
    --sf-7:            #eef2f7;
    --sf-8:            #e7f7ec;
    --sf-9:            #e8edf4;
    --sf-10:           #e2e8f0;

    /* Neutral fills — bar tracks, chips, empty states */
    --fill-1:          #dbe2ea;
    --fill-2:          #cbd5e1;
    --fill-3:          #94a3b8;
    --fill-4:          #6d81b5;

    /* Rules and borders */
    --bd-1:            #eef2f7;
    --bd-2:            #e4e9f2;
    --bd-3:            #d8e0ea;
    --bd-4:            #cbd5e1;
    --bd-5:            #94a3b8;

    /* Text */
    --ink-1:           #334155;
    --ink-2:           #475569;
    --ink-3:           #3f7a55;
    --ink-4:           #43567c;
    --ink-5:           #55648a;
    --ink-6:           #64748b;
    --ink-7:           #94a3b8;
    --ink-8:           #8fa3c8;

    /* Coloured washes — the pale ground behind a pill, a note, a panel */
    --tint-blue-1:     #eef4ff;
    --tint-blue-2:     #e8eefc;
    --tint-blue-3:     #e2edff;
    --tint-blue-4:     #dbeafe;
    --tint-blue-5:     #e1eaf8;
    --tint-blue-6:     #dfe6f2;
    --tint-blue-7:     #d7e3f8;
    --tint-blue-8:     #c7d2fe;
    --tint-blue-9:     #cfdcf5;
    --tint-blue-10:    #c7dcfd;
    --tint-blue-11:    #bfdbfe;
    --tint-blue-12:    #cfdcee;
    --tint-blue-13:    #c7d7f0;
    --tint-green-1:    #dcfce7;
    --tint-green-2:    #bbf7d0;
    --tint-amber-4:    #fde3a3;
    --tint-orange-2:   #fed7aa;
    --tint-red-1:      #ffeaea;
    --tint-red-2:      #fee2e2;
    --tint-red-3:      #fdd9d9;
    --tint-red-4:      #fecdd3;
    --tint-red-5:      #fecaca;
    --tint-amber-1:    #fffbeb;
    --tint-amber-2:    #fef3c7;
    --tint-amber-3:    #fef9c3;
    --tint-violet-1:   #ede9fe;
    --tint-violet-2:   #ddd6fe;
    --tint-violet-3:   #cec5fb;
    --tint-violet-4:   #cabffc;
    --tint-orange-1:   #ffedd5;
    --tint-teal-1:     #cffafe;

    /* Lettering on a wash */
    --on-blue-1:       #101a33;
    --on-blue-2:       #1e293b;
    --on-blue-3:       #1e3a8a;
    --on-blue-4:       #24418f;
    --on-blue-5:       #1e40af;
    --on-green-1:      #14532d;
    --on-green-2:      #166534;
    --on-green-3:      #15803d;
    --on-red-1:        #7c2d12;
    --on-red-2:        #991b1b;
    --on-red-3:        #b91c1c;
    --on-orange-1:     #4a2c05;
    --on-orange-2:     #713f12;
    --on-orange-3:     #78350f;
    --on-orange-4:     #92400e;
    --on-orange-5:     #b45309;
    --on-orange-6:     #c2410c;
    --on-teal-1:       #0e7490;
    --on-blue-6:       #1d4ed8;
    --on-violet-1:     #6d28d9;

    /* Coloured rules */
    --edge-blue-1:     #b5d3fb;
    --edge-blue-2:     #b9cdf0;
    --edge-blue-3:     #a9c8f8;
    --edge-blue-4:     #a9c0e8;
    --edge-blue-5:     #93c5fd;
    --edge-green-1:    #bbf7d0;
    --edge-green-2:    #bbe7c9;
    --edge-green-3:    #a7f3c6;
    --edge-green-4:    #9ae7ba;
    --edge-green-5:    #86efac;
    --edge-green-6:    #94d3a8;
    --edge-amber-1:    #f0dda4;
    --edge-amber-2:    #f5d78e;
    --edge-amber-3:    #f2dd68;
    --edge-amber-4:    #fcd34d;
    --edge-red-1:      #fbaeae;
    --edge-red-2:      #fca5a5;
    --edge-red-3:      #fecaca;
    --edge-orange-1:   #fb923c;

    /* The shell — navy in both themes, because it frames the page rather than being it */
    --navy:            #0e1a2e;
    --navy-2:          #16233c;
    --navy-line:       #24334f;

    /* Brand — a FILL keeps its saturation (it carries white lettering); the -ink twin is the
       same hue as TEXT and has to swap ends of the scale instead */
    --blue:            #2563eb;
    --blue-hover:      #1d4ed8;
    --link:            #2563eb;
    --blue-dark:       #1d4ed8;
    --green:           #16a34a;
    --green-ink:       #16a34a;
    --amber:           #b45309;
    --amber-ink:       #b45309;
    --red:             #dc2626;
    --red-ink:         #dc2626;
    --violet:          #7c3aed;
    --violet-ink:      #7c3aed;

    /* Aliases — the names the stylesheets already used, pointed at the ramps above so the two
       can never drift apart */
    --bg:              var(--sf-7);
    --card:            var(--sf-1);
    --line:            var(--bd-2);
    --muted:           var(--ink-6);
    --ink:             #0f172a;
    --blue-soft:       var(--tint-blue-4);
    --green-soft:      var(--tint-green-1);
    --amber-soft:      var(--tint-amber-2);
    --red-soft:        var(--tint-red-2);
    --violet-soft:     var(--tint-violet-1);

    /* The accent wheel (theme.css) — the base hue is a fill and holds still; the -d twin is text
       and lifts, the -s twin is a wash and deepens */
    --c-indigo-d:      #3730a3;
    --c-indigo-s:      #e8e7ff;
    --c-blue-d:        #1d4ed8;
    --c-blue-s:        #dbeafe;
    --c-sky-d:         #0369a1;
    --c-sky-s:         #e0f2fe;
    --c-teal-d:        #0f766e;
    --c-teal-s:        #d6f5f0;
    --c-emerald-d:     #047857;
    --c-emerald-s:     #d7f7e7;
    --c-amber-d:       #b45309;
    --c-amber-s:       #fef3c7;
    --c-orange-d:      #c2410c;
    --c-orange-s:      #ffedd5;
    --c-rose-d:        #be123c;
    --c-rose-s:        #ffe4e8;
    --c-pink-d:        #be185d;
    --c-pink-s:        #fce7f3;
    --c-violet-d:      #6d28d9;
    --c-violet-s:      #ede9fe;
    --kaw:             rgba(37, 99, 235, .07);

    /* Product colours — a fixed categorical order, lifted just enough to hold up on a dark
       ground */
    --pc-1:            #2a78d6;
    --pc-2:            #eb6834;
    --pc-3:            #1baf7a;
    --pc-4:            #4a3aa7;
    --pc-5:            #eda100;
    --pc-6:            #e87ba4;
    --pc-7:            #008300;
    --pc-8:            #e34948;
  }
}