/* The tokens, and nothing else.

   The frame is the dark theater (DESIGN §2): fixed forever, only the light
   changes. The token NAMES are the contract — no component ever knows which
   theme is on — and a theme is one block that assigns their values. Adding a
   look is adding a block here, never a branch anywhere else.

   THIS FILE IS NOW THE ONLY HOME FOR A COLOUR. It used to describe a second
   home: render() read a palette out of public/data/palettes.js and wrote all
   twenty-one values onto the app's own wrapper every frame, which meant these
   blocks were inert for everything inside the app and an edit here changed
   nothing. That is gone. render() sets one attribute, `data-theme` on the
   document, and these blocks do the painting.

   ONE RACK. A theme you wear and a theme a destination wears are the same kind
   of thing: a block of token values with a name. `night` and `day` are the two
   you can be in; the eight named for an era are the light a story is told in.
   That is why they are all in one list rather than two systems.

   Each block declares all twenty-one, deliberately. It is more text than
   sharing a family would be, and it is worth it: a block is completely
   self-describing, nothing resolves through a cascade you have to hold in your
   head, and it is exactly the shape the theme builder will emit later.

   ON DEATH ROW: the eight era blocks. When the trim learns to follow the
   picture (STYLES-PLAN.md), a story will be lit by your own theme plus an
   accent lifted off its art, and these eight go. They are kept until then so
   the app is never lit worse than it is today.

   The selector is doubled — `:root[data-theme=X]` and `[data-theme=X]` — so a
   theme can be worn by the document OR scoped to one element. The door's
   preview of a destination needs the second half: four swatches standing in
   another theme while the room around them stays in yours.

   A BLOCK THAT MEANS TO BE OFFERED SAYS ITS OWN NAME, in `--theme-name`. The
   picker is built by reading this file for blocks that carry one, so adding a
   look you can choose is adding a block here and nothing else: there is no list
   of theme names in JavaScript to fall out of step with the stylesheet, because
   there is no list in JavaScript at all. A block with no name still works when
   something sets it deliberately, it is just not on the menu.

   That is also the fence around the era blocks. They are reached as
   `<era>-night` and `<era>-day`, so only looks with an era variant may be worn
   inside a story, and only the two named here have one. When the trim learns to
   follow the picture the eight go and the fence goes with them; until then a
   nameless era block cannot be picked by accident. */

/* ---------- the contract past colour: the kit ----------

   Type, spacing, radii, borders, shadows, motion. Named here the way the
   colours are, so a part can be described once and every room draws it the
   same. Nothing reads these yet: naming them is Step 4 box 1, the button, the
   panel and the input come next, and the rooms adopt them one at a time. So
   adding this block changes nothing on screen.

   THESE NUMBERS CAME OUT OF THE APP, not out of the air. Counted across
   public/ before a single one was named:

     padding        113 distinct values, 375 uses
     border-radius   23 distinct values, 406 uses
     gap             26 distinct values, 451 uses
     font-size       40 distinct values, 346 uses   (11.5, 12.5, 13.5, 14.5 …)
     line-height     14 distinct values, 131 uses
     letter-spacing  12 distinct values,  31 uses
     border width     3 distinct values, 330 uses   (1px, 319 of them)
     box-shadow       already every one var(--shad)
     font-weight      already only 600 and 700

   Each step below sits on the biggest cluster it absorbs, so adoption moves
   most sites by nothing and the rest by a pixel or a half. Where two clusters
   were close and both large — 13 and 13.5, 12 and 12.5 — the whole pixel wins,
   because half-pixel type is what hand-tuning looks like, not what a scale
   looks like.

   THERE IS ONE TYPE SCALE, AND THIS IS IT. There used to be two. The house
   read a written size literally, and the Council rewrote whole bands of it
   larger for readability, so the same markup was 13px in one room and 15px in
   another, and a room being converted onto classes fell silently off the big
   scale onto the small one. That is not a theory: it happened to four things
   in the Council's header on 2026-08-13 and shipped.

   The two scales disagreed by about 2px the whole way up, so the standard is
   the MIDDLE of them, to the whole pixel:

     role            was, house   was, Council   standard
     mono label            9            12          11
     small print          12            14          13
     secondary            13            15          14
     body                 14            16          15
     input                15            17          16
     long reading         18            18          18

   Above 16 the two never disagreed, so those steps are unchanged.

   The bottom five each rose a pixel, which is also the direction the ordinary
   readability guidance points: 9px uppercase letterspaced was under any of it.
   The scale is APPLIED site-wide in components.css, by rule rather than by
   editing six hundred call sites. */
:root{
  /* THE DRAWER'S FOLDER SWATCHES. A folder's colour is identity, not theme,
     the same standing as --sf-c-*: one value in every theme, named here so
     the ratchet sees one home. Blue is deliberately not night's --accent
     (#529ac8 there), or a blue folder vanishes on a lit row at night. */
  --dr-c-blue:#4a8fc0; --dr-c-green:#5fa96a; --dr-c-amber:#c8973f;
  --dr-c-red:#c05a4e; --dr-c-purple:#8f7ac4; --dr-c-gray:#8a8a8a;

  /* type. THE SCALE IS PATHARY'S NOW (Mark, 2026-08-15: one design system
     across the products, no second system). The numbers are homebidpros'
     settings family, read out of its stylesheets, not out of the air:
     20/700 page heads, 13.5/500 row titles, 12 subs, 11 bold uppercase
     kickers. 13.5 is a deliberate exception to the whole-pixel rule,
     because matching the reference beats the local preference. */
  --t-label:11px; --t-tiny:12px; --t-small:13px; --t-body:13.5px;
  --t-lead:15px; --t-sub:16px; --t-head:18px; --t-title:20px;
  --t-display:24px; --t-room:28px;
  /* The Cellar's ember (Mark, 2026-08-16): a subtle maroon breathing down
     from the canvas's upper right. Register identity, not a theme value —
     the room below glows the same in every light, the way painted art
     never re-tints — so it lives here on the bare root, outside the
     racks, beside the type scale. */
  --cellar-ember:rgba(112,24,36,.16);
  --w-med:500; --w-semi:600; --w-bold:700;
  --lh-tight:1.4; --lh-body:1.5; --lh-read:1.65;
  --ls-label:.12em; --ls-wide:.16em; --ls-head:-.015em;
  /* The working face is native system UI, exactly as homebidpros runs it.
     The house's Trajan is Cinzel: one named display face for the wordmark,
     canvas room name and primary room/page headers. The mono band stays for
     the story rooms' stage language. */
  --font-ui:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-trajan:"Cinzel","Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* cream printed on a picture. not a theme colour — art never re-tints,
     and Day's --text would go dark on a night still. */
  --mark:#F1EDE7;
  --mark-shadow:0 1px 2px rgba(0,0,0,.55), 0 10px 32px rgba(0,0,0,.4);

  /* THE REST OF PRINTING ON A PICTURE, and it is --mark's family. The Stacks
     paints art behind every card (2026-08-21), so a whole card's worth of
     chrome now sits on a photograph: two quieter inks, a hairline, and the
     dark veils a badge and a button need to stay legible over a bright sky.
     Same standing as --mark and for the same one reason — a lit card is dark
     whatever the app is wearing, so Day's --ink would go black on black. */
  --on-art:rgba(241,237,231,.90);
  --on-art-dim:rgba(241,237,231,.64);
  --on-art-line:rgba(241,237,231,.30);
  --on-art-edge:rgba(241,237,231,.18);
  --art-veil:rgba(8,10,14,.42);
  --art-veil-deep:rgba(8,10,14,.60);
  /* The scrim over a card's art, and it RUNS ACROSS rather than down.

     The first version went top to bottom at 66 to 90 percent the whole way,
     which is a lid rather than a scrim: Mark painted three cards, put them
     beside his mockups and the pictures were barely there — a ceiling fan and
     a sled you had to hunt for. The text was perfectly readable and there was
     nothing behind it worth reading it over.

     Text hangs on the LEFT of a card, so the dark belongs on the left and the
     picture gets the right. Heavy where the words are, nearly clear by the far
     edge. It works because the cover artist is briefed to keep the upper left
     quiet and put the subject to one side, so the two halves of this are one
     decision made in two places (src/minds/cover.mjs).

     A LAYER, never a filter: the theme law says a theme dresses the frame and
     never touches the art itself. */
  --art-scrim:linear-gradient(100deg,
    rgba(6,8,12,.93) 0%, rgba(6,8,12,.84) 34%, rgba(6,8,12,.52) 68%, rgba(6,8,12,.26) 100%);
  /* And a gentle floor under the footer, so a button and a price never sit on
     the brightest part of a picture. Second layer, not a stronger first one. */
  --art-foot:linear-gradient(to top, rgba(6,8,12,.72) 0%, rgba(6,8,12,0) 38%);

  /* THE PAGE IS PAPER (Script Forge). Same standing as --mark and the
     Cellar's ember: a printed page is a physical object sitting in the room,
     so it does not re-tint when the light changes — a screenplay is black
     Courier on cream in every theme, the way it is on a desk. Everything
     below the paper is ink ON that paper: the writing, the title-page keys,
     the CONT'D the page adds, the force marks the writer types, the outline
     lines that never print, and the little red i that asks Ann what an
     element is. The room's own geometry lives with the room, in
     styles/forge-script.css. */
  --sf-paper:#f4f1ea;
  --sf-pencil:#111111;
  --sf-key:#b5afa4;
  --sf-gray:#8a867e;
  --sf-force:#a39d92;
  --sf-outline:#7a7469;
  --sf-mono:"Courier Prime","Courier New",Courier,monospace;
  /* the sixth ink: the little red i in the gutter that asks Ann what an
     element is. It is a mark ON the paper, so it stands with the five above
     and does not follow the light either. */
  --sf-ask:#d9534f; --sf-ask-ink:#ffffff;

  /* THE TEACHING COLOURS. Ann can tag every element on the page in its own
     colour while somebody is learning the six kinds of paragraph. Same
     standing as the paper they sit on: ink, not theme, so a lesson looks the
     same in every light and a writer who learned scene-is-amber does not have
     to learn it again at night. Off by default; the gear turns them on. */
  --sf-c-scene:#e0a458;
  --sf-c-action:#8fb3ff;
  --sf-c-character:#c98cf5;
  --sf-c-dialogue:#7fd1a8;
  --sf-c-paren:#f0d36b;
  --sf-c-transition:#f08a7a;
  --sf-c-center:#8fb3ff;
  --sf-c-quiet:#a39d92;

  /* SHOW ME EVERY LINE MY CHARACTER SPEAKS. Six highlighters, one per part,
     for learning lines and running a table read: the trade's own meaning of
     the word (Scriptation's Actor Highlight, Final Draft's Highlight
     Characters), and nothing to do with marking a favourite sentence.

     Same standing as the teaching colours above and the paper below them:
     ink on a physical page, so a part that is pink stays pink in every light.
     Six because a scene with more than six people talking at once is a scene
     with a different problem. */
  --sf-hl-1:#ffe27a;
  --sf-hl-2:#a8e6c9;
  --sf-hl-3:#f7b7d3;
  --sf-hl-4:#a9cdf7;
  --sf-hl-5:#f6c48a;
  --sf-hl-6:#cdb6f0;

  /* space. one scale for gap and padding both, because the app has never
     needed a different rhythm for the two. */
  --s1:4px; --s2:6px; --s3:8px; --s4:10px;
  --s5:12px; --s6:14px; --s7:18px; --s8:22px;

  /* shape — Pathary's radii: 8 small, 12 standard, 14 cards, 18 large */
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px; --r-pill:100px; --r-round:50%;
  --bd:1px; --bd-thick:1.5px;

  /* depth. the colour is already a token; these name the four heights the app
     actually casts from. */
  --sh-card:0 16px 38px var(--shad);
  --sh-panel:0 20px 55px var(--shad);
  --sh-menu:0 18px 42px var(--shad);
  --sh-modal:0 35px 100px var(--shad);

  /* motion */
  --mo-fast:.2s ease; --mo-slow:.8s ease; --mo-dissolve:2.6s cubic-bezier(.45,0,.2,1);
}

/* ---------- what a block gets for free ----------

   The Council's reading lift, defaulted to NO LIFT: the room reads exactly like
   the rest of the app in whatever theme is on. Each value points at the theme's
   own token, and a custom property inherits the value it RESOLVED to rather
   than the expression, so a block below simply supplies its own colours and
   these resolve against them.

   This rule sits above the blocks on purpose. It has the same specificity as
   they do, so source order decides, and anything a block declares below wins.

   Why it exists: the lift used to be four dark values typed into base.css, and
   Day inherited a black Council with 1.05:1 text on it. Moving them here fixed
   that room, but a theme added later that forgot the nine values would have
   inherited night's and put the room straight back. Now the worst a forgetful
   theme can do is read like itself. */
:root, [data-theme]{
  --c-panel:var(--panel); --c-edge:var(--edge); --c-muted:var(--muted); --c-inset:var(--inset);
  --c-veil:var(--panel);
  --c-panel-hi:var(--panel); --c-edge-hi:var(--edge); --c-muted-hi:var(--muted); --c-ink2-hi:var(--ink2);

  /* THE ACCENT'S SOFT PAIR, defaulted so a theme that names only --accent
     (Desert, the eras) still draws a filled badge and a visible line. The
     accent-axis blocks at the bottom of this file override both. */
  --accent-soft:var(--sel); --accent-line:var(--edge);

  /* RED, and it had to become real. The Community's refusals were painted with
     --accent, which in this app is BLUE, so every "that is too big" and "write a
     little first" on that screen read as a link. There was no red token at all
     to reach for. It is mixed against --text rather than pinned, so it darkens
     on a pale theme and lifts on a dark one instead of being legible in one and
     muddy in the other. Twenty-one themes, one line.

     AND THE TWO THAT GO WITH IT: white ON a scrim, and the scrim itself. A
     caption over a photo and the × on a lightbox are white on black in EVERY
     theme, because they sit on an image and not on the page. --onAccent was
     being used for this and it is the wrong colour: in night it is nearly
     black, so the picture count read as dark text on a dark plate. */
  --danger: color-mix(in srgb, #e5484d 78%, var(--text) 22%);
  --onScrim: #ffffff;
  --scrimDeep: rgba(0, 0, 0, .82);

  /* THE SURROUND: the theater the app column stands in. It was `#0a0908`
     hardcoded on html,body in base.css, which is the same bug as the Council
     being a black room in Day and the browser chrome being nailed to dark — a
     colour that lives outside the theme and therefore never follows it. A pale
     app sat in black bars on both sides at any window wider than 1120px.

     Defaulted to exactly the value it always had, so no night look moves at
     all; the light blocks below say what a pale theater is instead. */
  --surround:#0a0908;
}

/* ---------- the two you can be in ---------- */

/* NIGHT — Pathary's dark (homebidpros admin.css, read 2026-08-15), and what
   the page wears before it boots. The accent here is Blue's dark reading;
   the accent-axis blocks at the bottom repaint it on your pick.

   THE BLUE CAME DOWN (Mark, 2026-08-19: "can we make the blue a little
   translucent its stabing my eyes"). It was #5cb2e8 — the brightest of the
   five accents, on the darkest ground in the app, which is the whole of the
   glare. He asked for translucency and that is exactly what this is, baked
   into the value where a colour is allowed to live: the old blue mixed about
   a fifth of the way into --bg. Doing it as a real transparency in the
   component rules would have meant touching every surface that fills with
   accent, in five stylesheets, and they would have drifted apart by Tuesday.
   One value, every surface, both floors.

   Luminance is what stabs, not hue, so the drop is in brightness rather than
   saturation: accent-coloured TEXT keeps its contrast against the panel,
   which matters more here than anywhere. Day is untouched — a deep blue on
   white was never the complaint. */
:root,
:root[data-theme="night"], [data-theme="night"]{
  --theme-name:"Night";
  --bg:#171614; --panel:#242320; --edge:#38352f; --accent:#529ac8;
  --text:#edeae3; --muted:#9d998e; --setA:#2c2b27; --setB:#1e1d1b; --glow:rgba(82,154,200,.13);
  --accent-soft:#12283a; --accent-line:#244a63;
  --ink:rgba(255,255,255,.93); --ink2:rgba(255,255,255,.82); --ink3:rgba(255,255,255,.7);
  --ink4:rgba(255,255,255,.5); --ink5:rgba(255,255,255,.12); --sel:rgba(255,255,255,.05);
  --inset:rgba(0,0,0,.3); --chrome:rgba(23,22,20,.84); --onAccent:#171614;
  --onAccentDim:rgba(23,22,20,.6); --shad:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.55);
  /* Pathary's dark depth: one subtle shadow, height comes from the surfaces */
  --sh-card:0 1px 2px rgba(0,0,0,.5); --sh-panel:0 1px 2px rgba(0,0,0,.5);
  --sh-menu:0 8px 24px rgba(0,0,0,.5); --sh-modal:0 18px 48px rgba(0,0,0,.5);
}

/* Night's reading lift, keyed on the ATTRIBUTE only and never on bare `:root`.
   That matters: the block above claims `:root` as well, because it is what the
   page wears before it boots, and `:root` goes on matching after a theme is
   worn. Left in there, night's lift reached every theme — measured, and every
   era theme was showing the Council night's #1e1c1a panel over its own colours.
   Keyed this way, a theme that declares no lift falls to the defaults instead. */
:root[data-theme="night"], [data-theme="night"]{
  --c-panel:#2c2b27; --c-edge:#4a463f; --c-muted:#c4c0b6; --c-inset:rgba(0,0,0,.34);
  --c-veil:rgba(36,35,32,.62);
  --c-panel-hi:#34322e; --c-edge-hi:#57534a; --c-muted-hi:#d6d2c8; --c-ink2-hi:rgba(255,255,255,.9);
}

/* DAY — Pathary's light (homebidpros admin.css). Blue's light reading as
   the resting accent; the axis blocks below repaint on your pick. */
:root[data-theme="day"], [data-theme="day"]{
  --theme-name:"Day";
  --bg:#e9ebee; --panel:#ffffff; --edge:#e3e6ea; --accent:#1f6fa8;
  --text:#141a20; --muted:#66707b; --setA:#dfe4e9; --setB:#fafbfc; --glow:rgba(31,111,168,.09);
  --accent-soft:#e6f2fb; --accent-line:#bfe0f2;
  --ink:rgba(0,0,0,.88); --ink2:rgba(0,0,0,.72); --ink3:rgba(0,0,0,.6);
  --ink4:rgba(0,0,0,.42); --ink5:rgba(0,0,0,.1); --sel:rgba(20,26,32,.05);
  --inset:rgba(16,24,40,.04); --chrome:rgba(255,255,255,.86); --onAccent:#FFFFFF;
  --onAccentDim:rgba(255,255,255,.72); --shad:rgba(16,24,40,.1); --scrim:rgba(16,24,40,.4);
  --surround:color-mix(in srgb,var(--bg) 90%,#000);
  /* Pathary's light depth: the soft two-layer card shadow */
  --sh-card:0 1px 2px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.08);
  --sh-panel:0 1px 2px rgba(16,24,40,.06), 0 14px 40px rgba(16,24,40,.1);
  --sh-menu:0 8px 24px rgba(16,24,40,.12); --sh-modal:0 18px 48px rgba(16,24,40,.22);
  /* the Council's reading lift — see the note below */
  --c-panel:#ffffff; --c-edge:#cfd4da; --c-muted:#49515b; --c-inset:rgba(16,24,40,.06);
  --c-veil:rgba(255,255,255,.62);
  --c-panel-hi:#ffffff; --c-edge-hi:#b9c0c8; --c-muted-hi:#3d444d; --c-ink2-hi:rgba(0,0,0,.85);
}

/* DESERT — what Day used to be (Mark, 2026-08-15): the cream-and-gold look,
   kept whole as the first custom theme. Customs pin their own accent and the
   accent axis below deliberately does not reach them. */
:root[data-theme="desert"], [data-theme="desert"]{
  --theme-name:"Desert";
  --bg:#F6F2EB; --panel:#FFFFFF; --edge:#E2DACD; --accent:#8A6A2F;
  --text:#1C1917; --muted:#6E665B; --setA:#EADFC9; --setB:#FCFAF5; --glow:rgba(138,106,47,.09);
  --ink:rgba(0,0,0,.88); --ink2:rgba(0,0,0,.72); --ink3:rgba(0,0,0,.6);
  --ink4:rgba(0,0,0,.42); --ink5:rgba(0,0,0,.1); --sel:rgba(0,0,0,.05);
  --inset:rgba(0,0,0,.035); --chrome:rgba(255,255,255,.86); --onAccent:#FFFFFF;
  --onAccentDim:rgba(255,255,255,.72); --shad:rgba(0,0,0,.13); --scrim:rgba(255,255,255,.9);
  --surround:color-mix(in srgb,var(--bg) 90%,#000);
  --c-panel:#FFFFFF; --c-edge:#D6CBB8; --c-muted:#5C554B; --c-inset:rgba(0,0,0,.05);
  --c-veil:rgba(255,255,255,.62);
  --c-panel-hi:#FFFFFF; --c-edge-hi:#CBBCA4; --c-muted-hi:#4A443B; --c-ink2-hi:rgba(0,0,0,.82);
}

/* THE COUNCIL'S READING LIFT. The Council is the room you sit and read in, so
   it wants a little more than the house gives: secondary text nearer the body
   text, a border you can actually see, a panel that lifts off the page, and a
   deeper inset. That lift used to be four dark values typed into base.css,
   which is why the Council stayed a dark room when the app went to Day and
   every word in it fell to 1.1:1. It is a theme's business, so it lives here,
   and the `-hi` set is the same lift again for the high-contrast setting in
   Council settings. `--c-veil` is the translucent plate the canvas stands on.

   The night values above are exactly the ones base.css used to hardcode, to
   the digit, so night did not move when this was fixed. Day's are the same
   idea pointed the other way: muted goes DARKER to lift off a pale page where
   night's goes lighter.

   Only these two blocks carry them. The eight era blocks do not, because the
   Council is never worn inside a story, and a scoped era swatch inherits these
   from the document anyway. */

/* ---------- the light a story is told in (on death row) ---------- */

/* 1310 · EMBER · STONE · CANDLELIGHT */
:root[data-theme="1310-night"], [data-theme="1310-night"]{
  --bg:#0d0b0a; --panel:#171310; --edge:#2c221b; --accent:#D4692F;
  --text:#EDE4DC; --muted:#8C7D72; --setA:#3f1c0b; --setB:#090706; --glow:rgba(212,105,47,.14);
  --ink:rgba(255,255,255,.93); --ink2:rgba(255,255,255,.82); --ink3:rgba(255,255,255,.7);
  --ink4:rgba(255,255,255,.5); --ink5:rgba(255,255,255,.12); --sel:rgba(255,255,255,.05);
  --inset:rgba(0,0,0,.26); --chrome:rgba(10,9,8,.84); --onAccent:#14110c;
  --onAccentDim:rgba(20,17,12,.6); --shad:rgba(0,0,0,.45); --scrim:rgba(0,0,0,.82);
}
:root[data-theme="1310-day"], [data-theme="1310-day"]{
  --bg:#F8F1EA; --panel:#FFFBF7; --edge:#E9D9C9; --accent:#A6461B;
  --text:#1E1512; --muted:#77675C; --setA:#F2DCC8; --setB:#FDF8F4; --glow:rgba(166,70,27,.09);
  --ink:rgba(0,0,0,.88); --ink2:rgba(0,0,0,.72); --ink3:rgba(0,0,0,.6);
  --ink4:rgba(0,0,0,.42); --ink5:rgba(0,0,0,.1); --sel:rgba(0,0,0,.05);
  --inset:rgba(0,0,0,.035); --chrome:rgba(255,255,255,.86); --onAccent:#FFFFFF;
  --onAccentDim:rgba(255,255,255,.72); --shad:rgba(0,0,0,.13); --scrim:rgba(255,255,255,.9);
  --surround:color-mix(in srgb,var(--bg) 90%,#000);
}

/* 1925 · AMBER · SMOKE · LOW LAMPS */
:root[data-theme="1925-night"], [data-theme="1925-night"]{
  --bg:#120f0b; --panel:#1b1712; --edge:#2e261c; --accent:#D9A441;
  --text:#F2ECE2; --muted:#9A8E7C; --setA:#4a2f13; --setB:#1a1209; --glow:rgba(217,164,65,.14);
  --ink:rgba(255,255,255,.93); --ink2:rgba(255,255,255,.82); --ink3:rgba(255,255,255,.7);
  --ink4:rgba(255,255,255,.5); --ink5:rgba(255,255,255,.12); --sel:rgba(255,255,255,.05);
  --inset:rgba(0,0,0,.26); --chrome:rgba(10,9,8,.84); --onAccent:#14110c;
  --onAccentDim:rgba(20,17,12,.6); --shad:rgba(0,0,0,.45); --scrim:rgba(0,0,0,.82);
}
:root[data-theme="1925-day"], [data-theme="1925-day"]{
  --bg:#F8F3E9; --panel:#FFFCF5; --edge:#E8DEC7; --accent:#8C6A1E;
  --text:#1D1810; --muted:#736A57; --setA:#F2E5C6; --setB:#FEFBF5; --glow:rgba(140,106,30,.09);
  --ink:rgba(0,0,0,.88); --ink2:rgba(0,0,0,.72); --ink3:rgba(0,0,0,.6);
  --ink4:rgba(0,0,0,.42); --ink5:rgba(0,0,0,.1); --sel:rgba(0,0,0,.05);
  --inset:rgba(0,0,0,.035); --chrome:rgba(255,255,255,.86); --onAccent:#FFFFFF;
  --onAccentDim:rgba(255,255,255,.72); --shad:rgba(0,0,0,.13); --scrim:rgba(255,255,255,.9);
  --surround:color-mix(in srgb,var(--bg) 90%,#000);
}

/* 1968 · GRAIN · SUNFLARE · KODACHROME */
:root[data-theme="1968-night"], [data-theme="1968-night"]{
  --bg:#0c100d; --panel:#141a16; --edge:#243026; --accent:#8FBF6A;
  --text:#E9F0E7; --muted:#879682; --setA:#1d3a22; --setB:#080b09; --glow:rgba(143,191,106,.13);
  --ink:rgba(255,255,255,.93); --ink2:rgba(255,255,255,.82); --ink3:rgba(255,255,255,.7);
  --ink4:rgba(255,255,255,.5); --ink5:rgba(255,255,255,.12); --sel:rgba(255,255,255,.05);
  --inset:rgba(0,0,0,.26); --chrome:rgba(10,9,8,.84); --onAccent:#14110c;
  --onAccentDim:rgba(20,17,12,.6); --shad:rgba(0,0,0,.45); --scrim:rgba(0,0,0,.82);
}
:root[data-theme="1968-day"], [data-theme="1968-day"]{
  --bg:#F2F5EF; --panel:#FCFEFA; --edge:#DBE4D6; --accent:#4E7A32;
  --text:#141A13; --muted:#5F6B59; --setA:#DEECD4; --setB:#F9FCF7; --glow:rgba(78,122,50,.09);
  --ink:rgba(0,0,0,.88); --ink2:rgba(0,0,0,.72); --ink3:rgba(0,0,0,.6);
  --ink4:rgba(0,0,0,.42); --ink5:rgba(0,0,0,.1); --sel:rgba(0,0,0,.05);
  --inset:rgba(0,0,0,.035); --chrome:rgba(255,255,255,.86); --onAccent:#FFFFFF;
  --onAccentDim:rgba(255,255,255,.72); --shad:rgba(0,0,0,.13); --scrim:rgba(255,255,255,.9);
  --surround:color-mix(in srgb,var(--bg) 90%,#000);
}

/* 2211 · COOL · HIGH-KEY · STEEL · CLOSE */
:root[data-theme="2211-night"], [data-theme="2211-night"]{
  --bg:#080d11; --panel:#101820; --edge:#1f2f3a; --accent:#79CBE0;
  --text:#E6F1F5; --muted:#7E94A0; --setA:#0e3f52; --setB:#060a0e; --glow:rgba(121,203,224,.14);
  --ink:rgba(255,255,255,.93); --ink2:rgba(255,255,255,.82); --ink3:rgba(255,255,255,.7);
  --ink4:rgba(255,255,255,.5); --ink5:rgba(255,255,255,.12); --sel:rgba(255,255,255,.05);
  --inset:rgba(0,0,0,.26); --chrome:rgba(10,9,8,.84); --onAccent:#14110c;
  --onAccentDim:rgba(20,17,12,.6); --shad:rgba(0,0,0,.45); --scrim:rgba(0,0,0,.82);
}
:root[data-theme="2211-day"], [data-theme="2211-day"]{
  --bg:#EFF4F7; --panel:#FCFEFF; --edge:#D5E2E9; --accent:#1E6E86;
  --text:#0F171B; --muted:#5A6C75; --setA:#D7EAF2; --setB:#F8FCFE; --glow:rgba(30,110,134,.09);
  --ink:rgba(0,0,0,.88); --ink2:rgba(0,0,0,.72); --ink3:rgba(0,0,0,.6);
  --ink4:rgba(0,0,0,.42); --ink5:rgba(0,0,0,.1); --sel:rgba(0,0,0,.05);
  --inset:rgba(0,0,0,.035); --chrome:rgba(255,255,255,.86); --onAccent:#FFFFFF;
  --onAccentDim:rgba(255,255,255,.72); --shad:rgba(0,0,0,.13); --scrim:rgba(255,255,255,.9);
  --surround:color-mix(in srgb,var(--bg) 90%,#000);
}

/* ---------- the accent axis (Mark, 2026-08-15) ----------

   Pathary's accent picker, as a second attribute BESIDE the theme: render()
   wears `data-accent` next to `data-theme`, and your pick recolors Day and
   Night both. The values are homebidpros' HUB_ACCENTS table verbatim
   (src/lib/accents.js): a light theme takes the palette's darker ink so a
   white label passes AA on the fill; a dark theme takes the vivid base with
   a near-black label.

   THE FENCE: every selector here names day or night explicitly, so a custom
   theme (Desert) or an era block is never repainted by the picker — customs
   pin their own accent, that is what makes them custom. These blocks sit
   LAST in the file because they must win day's and night's resting Blue by
   source order at equal specificity on the scoped half.

   Like the theme blocks, each selector has a scoped half, so one element
   carrying both attributes (the Settings dots) can preview an accent while
   the document keeps yours. */
:root[data-theme="day"][data-accent="green"], [data-theme="day"][data-accent="green"]{
  --accent:#0f7c3d; --accent-soft:#e7f5ec; --accent-line:#bfe6cd; --glow:rgba(15,124,61,.09); --onAccent:#ffffff;}
:root[data-theme="night"][data-accent="green"], [data-theme="night"][data-accent="green"]{
  --accent:#41c274; --accent-soft:#17331f; --accent-line:#2a5537; --glow:rgba(65,194,116,.13); --onAccent:#171614;}
:root[data-theme="day"][data-accent="earth"], [data-theme="day"][data-accent="earth"]{
  --accent:#8f4527; --accent-soft:#f6e9e2; --accent-line:#e6c9ba; --glow:rgba(143,69,39,.09); --onAccent:#ffffff;}
:root[data-theme="night"][data-accent="earth"], [data-theme="night"][data-accent="earth"]{
  --accent:#cf7d52; --accent-soft:#331f16; --accent-line:#57392a; --glow:rgba(207,125,82,.13); --onAccent:#171614;}
:root[data-theme="day"][data-accent="gold"], [data-theme="day"][data-accent="gold"]{
  --accent:#8a6410; --accent-soft:#f7efdb; --accent-line:#e6d3a0; --glow:rgba(138,100,16,.09); --onAccent:#ffffff;}
:root[data-theme="night"][data-accent="gold"], [data-theme="night"][data-accent="gold"]{
  --accent:#d9ad4e; --accent-soft:#332810; --accent-line:#574411; --glow:rgba(217,173,78,.13); --onAccent:#171614;}
:root[data-theme="day"][data-accent="blue"], [data-theme="day"][data-accent="blue"]{
  --accent:#1f6fa8; --accent-soft:#e6f2fb; --accent-line:#bfe0f2; --glow:rgba(31,111,168,.09); --onAccent:#ffffff;}
:root[data-theme="night"][data-accent="blue"], [data-theme="night"][data-accent="blue"]{
  --accent:#529ac8; --accent-soft:#12283a; --accent-line:#244a63; --glow:rgba(82,154,200,.13); --onAccent:#171614;}
:root[data-theme="day"][data-accent="slate"], [data-theme="day"][data-accent="slate"]{
  --accent:#4a515a; --accent-soft:#eef0f2; --accent-line:#d7dbdf; --glow:rgba(74,81,90,.09); --onAccent:#ffffff;}
:root[data-theme="night"][data-accent="slate"], [data-theme="night"][data-accent="slate"]{
  --accent:#b0b7bf; --accent-soft:#26262b; --accent-line:#42434a; --glow:rgba(176,183,191,.13); --onAccent:#171614;}

/* ---------- THE PAPER, and it is not on the theme rack ----------
   Mark's ruling, 2026-08-20: the reading surface is independent of the
   system, because a reader needs options. A book is read in the light the
   READER picked, and that choice does not move when the app goes to Day, the
   way a paperback does not change colour when you turn on a lamp.

   So these three are not themes and carry no --theme-name: the picker must
   never offer them, and nothing outside the Reader may wear one. They are
   chosen with data-paper on the room (see rooms/reader.js) and they paint the
   page and nothing else. The app theme still dresses the frame around it.

   They live in THIS file because a colour has exactly one home (the theme
   law), and the colour ratchet counts every raw value outside it. */
[data-paper="sepia"]{ --rd-page-bg:#f3ead9; --rd-page-ink:#4a3f2e; --rd-page-hl:rgba(143,179,255,.30); }
[data-paper="paper"]{ --rd-page-bg:#fbfaf6; --rd-page-ink:#1a1917; --rd-page-hl:rgba(143,179,255,.30); }
/* night's ink was #b8b0a2, which is a dim grey on a near-black page: about
   7:1, legal and tiring. Lifted so the page reads. */
[data-paper="night"]{ --rd-page-bg:#16150f; --rd-page-ink:#dcd4c4; --rd-page-hl:rgba(143,179,255,.22); }
