/* ==========================================================================
   Equinova design tokens — the palette, the roles, and the two scales.

   This file is the whole vocabulary, and it is the only place in the project where a colour is
   written down. Both front ends read it: the shop links it from fragments/layout.html and the
   admin console links it from static/admin/index.html. They used to keep separate copies of the
   same names — forest, brass, alabaster, declared twice with values that happened to agree — so
   the two could drift apart and nothing would say so. Now there is one copy and they cannot.

   Nothing here styles anything. Every rule in every stylesheet names a role from this file; this
   file names the colours.
   ========================================================================== */

/* ==========================================================================
   THE PALETTE

   The colours this shop is made of, named for what they look like. Nothing outside this block
   may use them. A rule that says `color:var(--brass)` is a rule that cannot be themed, because
   brass is a fact about a colour and not a statement about what the colour is doing — and there
   is no such thing as brass on a dark background.

   Everything below the palette is a role: page background, raised surface, muted text. Those are
   what the stylesheets use, and they are the only things that change between light and dark.
   ========================================================================== */
:root{
  --alabaster:#FBF9F5;
  --alabaster-deep:#F3EEE4;
  --alabaster-raised:#FDFCFA;
  --forest:#1C3121;
  --forest-deep:#122019;
  --forest-soft:#26402C;
  --brass:#C5A059;
  --brass-bright:#E4C583;
  --brass-lifted:#D9B978;
  /* Brass taken down until it can be read as words on ivory. The brass above measures 2.34:1
     there, which is why --text-accent is forest and not gold; this is 4.8:1, and it exists because
     the launch curtain has a line of gold lettering on cream that somebody has to be able to
     read. Nothing else needs it — gold keeps its other jobs at full strength. */
  --brass-antique:#8A6A28;
  --charcoal:#1A1A1A;
  --ink-70:#3F3F3A;
  --ink-60:#4A4A44;
  --ink-50:#5C5C54;
  --ink-40:#6A6A62;
  --ink-30:#71716B;

  --clay:#9B3B3B;
  --clay-deep:#7E2F2F;
  --clay-pale:#FDF2F2;
  --clay-line:#E5C4C4;
  --clay-chip:#F3E0E0;
  --amber-ink:#5C4108;
  --amber-pale:#FDF3E3;
  --amber-line:#C9922F;
  --amber-quiet:#F6EEDF;
  --amber-quiet-line:#E2D2B0;
  --amber-chip:#EFE6D2;
  --slate-ink:#4A4F57;
  --slate-ink-soft:#6B7079;
  --slate-pale:#F4F5F7;
  --slate-line:#8A8F98;
  --slate-chip:#E4EEF8;
  /* Green. The shop never wrote a word in it — see the note by --success below — so until the
     console came across there was nothing green in the palette at all. */
  --pine:#2F6B4F;
  --pine-chip:#E5F0EA;
  --sage:#8FC79C;
  --stone-chip:#ECECEC;
  /* The two ends of the console's page wash. Cream leaning warm at the top, sand at the foot. */
  --alabaster-warm:#F7F3EC;
  --alabaster-sand:#F1EBE1;

  --night:#12171A;
  --night-sunken:#171E21;
  --night-raised:#1B2327;
  --night-deep:#0D1214;
  --bone:#EFEDE7;
  --bone-90:#E9E7E2;
  --bone-70:#C3C1B9;
  --bone-60:#B3B1A9;
  --bone-50:#A6A49C;
  /* Lifted from #87857E when the console came across. It was measured against the page, where it
     was 4.89, and never against a card — and the console's disabled menu items are on a card,
     where it was 4.32. The shop's own disabled controls gain a little from this and lose nothing;
     it appears in the dark roles only, so no light declaration moves. */
  --bone-40:#918F88;

  /* ========================================================================
     THE ROLES — light

     Read these as sentences. "The page is alabaster." "A card is raised off it." "Muted text is
     ink at forty." Every stylesheet in this shop speaks in these terms and in no others.
     ======================================================================== */

  /* Surfaces */
  --surface-page: var(--alabaster);
  /*
     The page, where the page is not a flat fill. Only the admin console uses this: a gold bloom in
     the top-left corner over a cream ramp running down the screen. It is a role of its own rather
     than a lighter --surface-page because a gradient cannot be re-themed by swapping one colour —
     in dark every stop and the bloom's own strength have to be restated together, and a naive
     dark mode that only changes --surface-page leaves the bloom glowing over a black page.
  */
  --surface-page-wash:
    radial-gradient(1200px 500px at 10% -10%, rgba(197,160,89,0.18), transparent 60%),
    linear-gradient(180deg, var(--alabaster-warm) 0%, var(--alabaster) 40%, var(--alabaster-sand) 100%);
  /* Sunken: tinted bands, wells, thumbnails — the page, pressed in. */
  --surface-sunken: var(--alabaster-deep);
  /*
     Raised: cards. Pure white on a cream page is a harder step than the rest of the palette takes
     anywhere else, and it made every card read as a cut-out rather than as a surface lifted off
     the paper. This is off white by a hair, which is all it needed.
  */
  --surface-raised: var(--alabaster-raised);
  --surface-inverse: var(--forest);
  --surface-inverse-deep: var(--forest-deep);
  /*
     Action and selected are separate roles from inverse, even though all three are forest here,
     because they stop being the same thing in dark. Inverse is "a band that recedes"; action is
     "the button you press"; selected is "the one you picked". A dark theme that treats them as
     one paints a near-black button onto a near-black page and loses it.
  */
  --surface-action: var(--forest);
  --surface-action-hover: var(--forest-soft);
  --text-on-action: var(--alabaster);
  --surface-selected: var(--forest);
  --text-on-selected: var(--alabaster);
  --surface-accent: var(--brass);
  --surface-accent-bright: var(--brass-bright);
  /* The scrim behind a modal, and the two frosted panes. */
  --surface-scrim-soft: rgba(10,16,11,0.45);
  --surface-scrim: rgba(10,16,11,0.55);
  --surface-scrim-strong: rgba(10,16,11,0.62);
  --surface-glass-dark: rgba(18,32,25,0.55);
  --surface-glass-light: rgba(251,249,245,0.72);
  --surface-header: rgba(251,249,245,0.82);
  --surface-header-scrolled: rgba(251,249,245,0.94);
  --surface-field: var(--alabaster-raised);
  --surface-hover: var(--alabaster-deep);
  /* A well pressed into a dark band: the search box, a trending pill, a quiz step's disc. */
  --surface-well-on-inverse: rgba(251,249,245,0.08);
  --surface-hover-on-inverse: rgba(251,249,245,0.12);
  /*
     The row you are on, inside a dark band. Distinct from the hover above, which is a neutral
     lift: this is tinted with the accent because it has to say "you are here" rather than "your
     mouse is here", and the two are on screen at the same time. The shop has no persistent
     navigation to mark; the console's sidebar carries twelve destinations on every screen, and
     losing the gold would leave a hover and a selection looking the same.
  */
  --surface-selected-on-inverse: rgba(197,160,89,0.16);
  /* Pressed into whatever it is on, light or dark, which is why it is neutral rather than tinted. */
  --surface-well-on-inverse-solid: rgba(0,0,0,0.16);
  --warning-well: rgba(92,65,8,0.08);

  /* Text */
  --text-primary: var(--charcoal);
  --text-heading: var(--forest);
  --text-prose: var(--ink-70);
  --text-secondary: var(--ink-60);
  --text-subtle: var(--ink-50);
  --text-muted: var(--ink-40);
  --text-disabled: var(--ink-30);
  /*
     Text that wants to feel like the accent. In light this is the heading colour, not gold: gold
     on cream measures 2.34:1 and on a tinted band 2.12:1, and no amount of it being the brand
     colour makes an eyebrow readable at eleven pixels. Gold keeps every job where it is not
     asked to be read as words — borders, badges, focus rings — and comes back as text in dark,
     where it is lifted and measures 9.6:1.
  */
  --text-accent: var(--forest);
  /*
     Four tiers, down from the six near-identical opacities of the same white that were spread
     across the footer, the overlay and the dark home-page sections: 0.85, 0.82, 0.78, 0.75, 0.72,
     0.65, 0.55 and 0.5. Nobody could tell 0.82 from 0.78 side by side, and nobody was choosing
     between them on purpose — they are what happens when the same idea is typed out eight times.
  */
  --text-on-inverse: var(--alabaster);
  --text-on-inverse-strong: var(--alabaster);
  --text-on-inverse-muted: rgba(251,249,245,0.78);
  --text-on-inverse-soft: rgba(251,249,245,0.65);
  --text-on-inverse-faint: rgba(251,249,245,0.52);
  /* Gold keeps its job as text on the dark bands, where it measures 6.9:1 rather than 2.3:1. */
  --text-accent-on-inverse: var(--brass);
  --text-accent-on-inverse-bright: var(--brass-bright);
  --text-on-accent: var(--forest);

  /* Lines */
  --border: rgba(28,49,33,0.14);
  --border-accent: rgba(197,160,89,0.35);
  --border-on-inverse-strong: rgba(251,249,245,0.90);
  --border-on-inverse: rgba(251,249,245,0.25);
  --border-on-inverse-faint: rgba(251,249,245,0.14);
  /* Three tiers, down from five. 0.25, 0.35, 0.4, 0.5 and 0.7 of the same gold were in use and
     0.35 against 0.4 is not a difference anybody chose; 0.25 against 0.5 is. */
  --border-accent-on-inverse-soft: rgba(197,160,89,0.25);
  --border-accent-on-inverse: rgba(197,160,89,0.35);
  --border-accent-on-inverse-strong: rgba(197,160,89,0.55);

  /*
     Scrims laid over photographs so a caption can be read on top of them. These are the one group
     of colours that does not flip with the theme: a photograph is the same photograph in both, and
     the only thing that makes white text legible on it is darkening the picture underneath.
  */
  --scrim-photo: rgba(28,49,33,0.90);
  --scrim-photo-deep: rgba(15,25,15,0.92);
  --scrim-photo-soft: rgba(18,32,25,0.75);
  --scrim-photo-off: rgba(28,49,33,0);

  /*
     The launch curtain, and the second group here that does not flip — for the same kind of reason
     as the scrims above. It is a set piece rather than a surface: ivory silk on a brass rail, with
     the shop's name on it in forest. Somebody reading the shop in dark mode is being invited to
     the same party, and a curtain that came up black for them would be a different one.

     The dark block repeats these unchanged, which is how a file where every role has two values
     says "this one is deliberately the same".
  */
  /* The warm cream rather than the page's own: the page is a wall and this is cloth, and the
     alabaster the shop is printed on photographs as white once there is a fold beside it. */
  --curtain-silk: var(--alabaster-warm);
  --curtain-silk-lit: var(--alabaster);
  --curtain-silk-shade: var(--alabaster-sand);
  /*
     The folds are laid over the silk as light and shadow rather than written as two more creams,
     because a fold is not a colour: the same three values make a crease on the panel, a hem at the
     bottom and the shading at the edge of the window, and they stay in step if the silk is ever
     retinted. The shadow is warm — a grey shadow on cream is what makes it read as paper instead
     of cloth — and the sheen is kept under half, because at full strength the lit folds stop being
     folds and become white stripes.
  */
  --curtain-shadow: rgba(74,58,26,0.12);
  --curtain-shadow-deep: rgba(74,58,26,0.20);
  --curtain-sheen: rgba(255,255,255,0.45);
  --curtain-rail: var(--brass);
  --curtain-rail-bright: var(--brass-bright);
  --text-on-curtain: var(--forest);
  --text-on-curtain-muted: var(--ink-50);
  --text-on-curtain-accent: var(--brass-antique);

  /* Focus. Gold, as instructed, and the one place a 2.34:1 ratio is knowingly kept.
     The filter panel and the size selects already opted out of it and used forest instead —
     "the brass on white is not enough on its own", as the comment there said — so that second,
     stronger ring is a role of its own rather than a local exception. */
  --focus-ring: var(--brass);
  --focus-ring-strong: var(--forest);
  /* A tint of the accent, used as a fill behind a sizing note. */
  --accent-wash: rgba(197,160,89,0.10);

  /* ------------------------------------------------------------------------
     Semantic colours.

     There was no shared token for any of these. The same warning banner was written out three
     times — storefront.css, cart.css, admin.css — and the same red appeared in five files under
     two slightly different values, because nobody could see the other four while editing one.
     ------------------------------------------------------------------------ */
  --danger: var(--clay);
  /*
     Pressing red, as opposed to reading it. Both consoles need it now. Deleting a product is the
     one irreversible thing in the admin, and the storefront's confirmation grew a red button of
     its own when it stopped handing the question to the browser — the shop asks a customer to
     press red exactly twice, to drop a saved address and to remove a horse. Same shape as
     --surface-action and --surface-action-hover, and for the same reason.
  */
  --danger-hover: var(--clay-deep);
  --danger-surface: var(--clay-pale);
  --danger-border: var(--clay-line);
  --on-danger: #FFFFFF;

  --warning: var(--amber-ink);
  --warning-surface: var(--amber-pale);
  --warning-border: var(--amber-line);
  /* The quiet variant: a note about the state of the build, not a warning about the shop. */
  --warning-surface-quiet: var(--amber-quiet);
  --warning-border-quiet: var(--amber-quiet-line);

  /*
     There was no --success to match --danger and --warning, on the grounds that nothing on the
     storefront writes in green: success there is a tinted panel with a green rule down its edge,
     and those two were it. That held until the console arrived, which says "Shipped", "Delivered"
     and "On the shop" in green words on four badges. So the colour that was a colour waiting to
     be misused now has something to do, and it is defined once here rather than five times there.
  */
  --success: var(--pine);
  --success-surface: rgba(28,49,33,0.05);
  --success-border: var(--forest);

  --info: var(--slate-ink);
  --info-muted: var(--slate-ink-soft);
  --info-surface: var(--slate-pale);
  --info-border: var(--slate-line);

  /*
     Sale.

     Its own role rather than --danger reused, even though both are clay in this theme. A reduced
     price and a failed payment are not the same statement, and the moment somebody decides the
     shop's sale colour should be the gold instead, a shared token would take every error message
     with it. They are the same colour here because red is what a reduced price has looked like
     since long before the web; that is a coincidence of taste, not a shared meaning.

     --sale-ink is the price itself. --sale-badge is the pill on the photograph, which carries
     white and so needs the full-strength colour behind it rather than the wash.
  */
  --sale-ink: var(--clay);
  --sale-surface: var(--clay-pale);
  --sale-border: var(--clay-line);
  --sale-badge: var(--clay);
  --on-sale-badge: #FFFFFF;

  /* ------------------------------------------------------------------------
     Badge fills.

     A tier below the four surfaces above, and a separate one because it is a separate job. The
     *-surface roles are banner tints: a wash the width of a panel, carrying a sentence at body
     size, and deliberately close to the page so a notice does not shout. A status badge is eleven
     pixels of bold uppercase in a pill the width of the word inside it, sitting in a table column
     next to nine others, and at that size a banner tint stops reading as a badge at all — it
     reads as a slightly discoloured cell.

     --badge-success is the one that forces the point. --success-surface is a five-percent forest
     wash, which on cream is a grey. Put it in the console's status column beside --badge-neutral
     and "Delivered" and "Archived" become the same chip.
     ------------------------------------------------------------------------ */
  --badge-neutral: var(--stone-chip);
  --badge-danger: var(--clay-chip);
  --badge-warning: var(--amber-chip);
  --badge-success: var(--pine-chip);
  --badge-info: var(--slate-chip);

  /* Elevation */
  --shadow: 0 30px 70px -30px rgba(10,18,12,0.55);
  --shadow-header: 0 10px 30px -22px rgba(18,32,25,0.55);
  --shadow-drawer: 10px 0 30px rgba(0,0,0,0.15);
  --shadow-modal: 0 50px 110px -30px rgba(0,0,0,0.6);
  --shadow-sheet: 0 -20px 50px -10px rgba(0,0,0,0.6);
  --shadow-stage: 0 40px 90px -30px rgba(0,0,0,0.65);
  --shadow-accent: 0 16px 30px -12px rgba(197,160,89,0.75);
  --glow-accent: rgba(197,160,89,0.55);
  --glow-accent-strong: rgba(197,160,89,0.60);
  --glow-accent-soft: rgba(197,160,89,0.25);
  --accent-wash-solid: #FBF3E2;
  /* The travelling highlight on a loading skeleton. White on cream; near-nothing on black. */
  --shimmer: rgba(255,255,255,0.7);

  /* ------------------------------------------------------------------------
     THE TYPE SCALE

     There were thirty distinct font sizes across the seven stylesheets, including 12, 12.5, 13,
     13.5, 14 and 14.5 — six steps inside two and a half pixels, none of them a decision anybody
     made. Nothing looked wrong, because at that spacing nothing can. It is just noise that every
     future size then has to be guessed against.

     Six steps, and the spacing is deliberately uneven. It is tight at the bottom, where the text
     is working and a caption really does want to be a little smaller than body copy without
     becoming a different kind of thing, and it opens out at the top, where the text is display and
     a jump has to read as a jump. Whole pixels throughout: a half-pixel step is a rounding error
     with a name on it.

     Nothing sits between two steps. Where a heading shrinks on a narrow screen it now moves down
     the scale instead of inventing a size, which is what most of the thirty were.
     ------------------------------------------------------------------------ */
  --type-xs: 11px;    /* uppercase eyebrows, tags, the bag count */
  --type-sm: 13px;    /* captions, meta, labels, buttons — most of the shop is set in this */
  --type-md: 16px;    /* body copy, form fields, drawer links */
  --type-lg: 20px;    /* card and panel headings */
  --type-xl: 26px;    /* section headings, and the page titles once the screen is narrow */
  --type-2xl: 36px;   /* page titles */

  /* Outside the scale, deliberately, once. The home page h1 is the only thing on the storefront
     meant to be the largest thing anybody sees. Putting it on the scale would either pull it down
     to the size of a section heading or drag a seventh step up behind it for one declaration. */
  --type-hero: 48px;

  /* ------------------------------------------------------------------------
     THE LAYER SCALE

     Colours are named for their job and so are font sizes. Stacking order is the third thing of
     that kind, and it was the one still being decided a number at a time: the header sat at 100
     and every panel meant to cover it sat at 95 or 96, so the header painted over the close button
     of every modal, the drawer and the search overlay. The numbers were never wrong individually;
     there was just nowhere to look up the right one.

     The order below is the whole of it, lowest first, and it is an order rather than a set of
     numbers — the gaps are only there so something can be slipped in later without renumbering.

       furniture   badges, labels and captions sitting on top of their own card
       sticky      the header, and the bag page's checkout bar: pinned, but part of the page
       scrim       dims the page, and must therefore cover the header
       drawer      panels anchored to an edge, which sit ON the scrim they opened
       search      the full-screen search surface, which brings its own background
       modal       centred panels
       toast       above everything, because it confirms what was done inside a modal

     Two of those placements are load-bearing rather than aesthetic.

     The scrim sits above the header, not below it. Its job is to dim the page while a panel is
     open, and a header it cannot cover is a header that stays bright and clickable behind a modal.

     The drawer sits above the scrim, not below it. Opening the drawer opens the scrim as its
     backdrop — see toggleDrawer in storefront-chrome.js — so a drawer under the scrim would be
     dimmed by its own backdrop, and every click on it would be caught by the sheet of glass in
     front and close it.

     Anything numbered below this scale is local to one component's stacking context — a badge over
     a photograph, the sticky head inside a scrolling modal panel — and never competes with these.
     ------------------------------------------------------------------------ */
  --layer-furniture: 1;
  --layer-sticky: 100;
  --layer-scrim: 200;
  --layer-drawer: 300;
  --layer-search: 400;
  --layer-modal: 500;
  --layer-toast: 600;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 9px;
  --serif: 'Playfair Display', serif;
  --sans: 'Inter', sans-serif;

  /*
     The height of the sticky header, used to keep anchor targets and the sticky cart summary
     clear of it. Only header.site sticks — the announcement bar scrolls away — so this is that
     element's height and nothing else.

     The value below is a starting point for the moment before any script runs. It was 92px, which
     was too tall at every width and much too tall on a phone, so tapping a menu link scrolled the
     heading of the section it pointed at up out of sight. EquinovaChrome measures the header and
     overwrites this, which is the only way to be right about a bar whose height depends on how the
     nav wraps.

     The header is two rows from 768px up, so the starting figure went from 79 to 106, and then to
     122 when the tagline went under the mark: 80 for the controls row, 41 for the category row,
     and the rule between them. Below 768px it is one row again and unchanged — the tagline is not
     drawn there. Everything downstream — scroll-padding-top here, the sticky bag summary in
     cart.css — reads the measured value, and the measurement is a ResizeObserver on the header
     itself, so it was already right about a bar that had grown a row. These two numbers only have
     to be close enough that the first anchor click before the script runs lands well.
  */
  --header-h: 122px;

  /*
     Tied to the theme rather than to the system, so the parts the browser draws for itself —
     scrollbars, the date picker, a text field's caret — match the page a visitor actually chose.
     Left to `light dark`, someone reading the shop in light mode on a dark laptop would get pale
     pages framed by black scrollbars.
  */
  color-scheme: light;
}
@media(max-width:768px){ :root{ --header-h: 66px; } }

/* ==========================================================================
   THE ROLES — dark

   Every role above, given a second value. Nothing else in the shop knows this block exists.

   Four things here are not flat colours, and they are where a dark theme usually falls apart:

   - The frosted header. Its tint has to follow the page underneath it or the blur turns milky
     grey over a black page, so it is re-tinted rather than left alone.
   - The shadows. A soft black shadow is invisible on a near-black page, so elevation is carried
     by the surface being lighter than the page — which is why the dark surfaces step upward
     (page, sunken, raised) where the light ones step down.
   - The skeleton shimmer. A 70% white sweep is a strobe on black; it drops to 6%.
   - The scrim behind a modal. It has to stay darker than a page that is already dark.
   ========================================================================== */
[data-theme="dark"]{
  --surface-page: var(--night);
  /*
     The bloom drops from eighteen percent to eight and the ramp is restated in night rather than
     cream. Left alone it is a gold searchlight in the corner of a black screen; deleted, the
     console's page is the only flat black surface in either front end and looks broken beside the
     shop. Eight percent is where it stops being a light and starts being a warmth.
  */
  --surface-page-wash:
    radial-gradient(1200px 500px at 10% -10%, rgba(197,160,89,0.08), transparent 60%),
    linear-gradient(180deg, var(--night-sunken) 0%, var(--night) 45%, var(--night-deep) 100%);
  --surface-sunken: var(--night-sunken);
  --surface-raised: var(--night-raised);
  /*
     "Inverse" keeps its name and loses its meaning: the footer and the announcement bar are no
     longer the dark thing on a light page, they are the darkest thing on a dark one. Same role,
     same job — a band that recedes from the page — so the name still describes what it is for.
  */
  --surface-inverse: var(--night-deep);
  --surface-inverse-deep: var(--night-deep);
  /* Forest, lifted until it separates from the page it sits on. */
  --surface-action: #2E4C36;
  --surface-action-hover: #385B41;
  --text-on-action: var(--bone);
  --surface-selected: #2E4C36;
  --text-on-selected: var(--bone);
  --surface-accent: var(--brass-lifted);
  --surface-accent-bright: var(--brass-bright);
  --surface-scrim-soft: rgba(0,0,0,0.55);
  --surface-scrim: rgba(0,0,0,0.66);
  --surface-scrim-strong: rgba(0,0,0,0.76);
  --surface-glass-dark: rgba(13,18,20,0.72);
  --surface-glass-light: rgba(27,35,39,0.78);
  --surface-header: rgba(18,23,26,0.82);
  --surface-header-scrolled: rgba(18,23,26,0.95);
  --surface-field: #202A2E;
  --surface-hover: #232C31;
  --surface-well-on-inverse: rgba(233,231,226,0.07);
  --surface-hover-on-inverse: rgba(233,231,226,0.12);
  /* Lifted with the rest of the gold, and a little stronger: the sidebar it marks is now the
     darkest surface on a dark page rather than a dark surface on a light one. */
  --surface-selected-on-inverse: rgba(217,185,120,0.20);
  --surface-well-on-inverse-solid: rgba(0,0,0,0.28);
  --warning-well: rgba(227,180,95,0.10);

  --text-primary: var(--bone-90);
  --text-heading: var(--bone);
  --text-prose: var(--bone-70);
  --text-secondary: var(--bone-70);
  --text-subtle: var(--bone-60);
  --text-muted: var(--bone-50);
  --text-disabled: var(--bone-40);
  /* Gold comes back as text here, lifted off #C5A059 so it clears 4.5 against every dark
     surface. Unlifted it measures 4.0 on a raised card, which is a near miss and still a miss. */
  --text-accent: var(--brass-lifted);
  --text-on-inverse: var(--bone-90);
  --text-on-inverse-strong: var(--bone);
  --text-on-inverse-muted: rgba(233,231,226,0.78);
  --text-on-inverse-soft: rgba(233,231,226,0.66);
  --text-on-inverse-faint: rgba(233,231,226,0.54);
  --text-accent-on-inverse: var(--brass-lifted);
  --text-accent-on-inverse-bright: var(--brass-bright);
  --text-on-accent: var(--night-deep);

  --border: rgba(233,231,226,0.14);
  --border-accent: rgba(217,185,120,0.32);
  --border-on-inverse-strong: rgba(233,231,226,0.85);
  --border-on-inverse: rgba(233,231,226,0.22);
  --border-on-inverse-faint: rgba(233,231,226,0.12);
  --border-accent-on-inverse-soft: rgba(217,185,120,0.22);
  --border-accent-on-inverse: rgba(217,185,120,0.32);
  --border-accent-on-inverse-strong: rgba(217,185,120,0.50);

  --focus-ring: var(--brass-lifted);
  --focus-ring-strong: var(--bone-90);
  --accent-wash: rgba(217,185,120,0.10);

  /* The ceremony, repeated rather than re-themed. See the note beside these in the light block. */
  --curtain-silk: var(--alabaster-warm);
  --curtain-silk-lit: var(--alabaster);
  --curtain-silk-shade: var(--alabaster-sand);
  --curtain-shadow: rgba(74,58,26,0.12);
  --curtain-shadow-deep: rgba(74,58,26,0.20);
  --curtain-sheen: rgba(255,255,255,0.45);
  --curtain-rail: var(--brass);
  --curtain-rail-bright: var(--brass-bright);
  --text-on-curtain: var(--forest);
  --text-on-curtain-muted: var(--ink-50);
  --text-on-curtain-accent: var(--brass-antique);

  --danger: #E58B8B;
  /* Brighter, not darker. A pale red button on a dark page has to move towards the light on
     hover, or pressing it reads as the control receding. */
  --danger-hover: #EFA3A3;
  --danger-surface: #2A1A1A;
  --danger-border: #6B3A3A;
  --on-danger: var(--night-deep);

  --warning: #E3B45F;
  --warning-surface: #2A2113;
  --warning-border: #7A5E22;
  --warning-surface-quiet: #241E14;
  --warning-border-quiet: #4A3D22;

  --success: var(--sage);
  --success-surface: rgba(143,199,156,0.10);
  --success-border: #8FC79C;

  --info: #B9BEC6;
  --info-muted: #9AA0A9;
  --info-surface: #1A1F24;
  --info-border: #454C55;

  /* Clay at full strength is invisible on a near-black page — #9B3B3B on #12171A is 2.2:1, which
     is a price nobody can read. Lifted for the text, and the badge keeps a fill dark enough to
     carry the page's own pale ink rather than white. */
  --sale-ink: #EFA3A3;
  --sale-surface: #2A1A1A;
  --sale-border: #6B3A3A;
  --sale-badge: #C96B6B;
  --on-sale-badge: var(--night-deep);

  /* Badges. Each is its own colour muddied down into the page rather than a shared grey with a
     tinted word on it: at eleven pixels the fill is doing as much of the telling as the label. */
  --badge-neutral: #262C2F;
  --badge-danger: #33201F;
  --badge-warning: #32270F;
  --badge-success: #1A2E22;
  --badge-info: #1F2831;

  --shadow: 0 30px 70px -30px rgba(0,0,0,0.8);
  --shadow-header: 0 10px 30px -22px rgba(0,0,0,0.9);
  --shadow-drawer: 10px 0 30px rgba(0,0,0,0.5);
  --shadow-modal: 0 50px 110px -30px rgba(0,0,0,0.85);
  --shadow-sheet: 0 -20px 50px -10px rgba(0,0,0,0.85);
  --shadow-stage: 0 40px 90px -30px rgba(0,0,0,0.9);
  --shadow-accent: 0 16px 30px -12px rgba(217,185,120,0.35);
  --glow-accent: rgba(217,185,120,0.35);
  --glow-accent-strong: rgba(217,185,120,0.45);
  --glow-accent-soft: rgba(217,185,120,0.18);
  --accent-wash-solid: #2A2418;
  --shimmer: rgba(255,255,255,0.06);

  /* The browser's own furniture: form controls, scrollbars and the spell-check underline. */
  color-scheme: dark;
}