/* ==========================================================================
   THEMES, six complete 60 / 30 / 10 schemes
   --------------------------------------------------------------------------
   Load this AFTER assets/toolpath.css:

     <link rel="stylesheet" href="assets/toolpath.css">
     <link rel="stylesheet" href="assets/themes.css">

   then set one attribute on the root element:

     <html dir="rtl" lang="he" data-theme="orange">

   With no data-theme attribute nothing in this file applies and the site
   renders exactly as it does today. data-theme="gold" is that same palette
   written out in full, so the baseline can be compared against the others
   under identical rules.

   Each block below sets the WHOLE token set, not just the accent: the ground,
   the structural dark and its three enclosure steps, the steel greys, and the
   full accent scale. The dark is chosen per theme rather than reused, because
   graphite grey sitting under an orange or a terracotta accent is exactly
   what makes a re-skin look like a re-skin.

   HOW THE NUMBERS WERE PICKED. Gold is the reference. Every stop in every
   other accent scale is placed at the same relative luminance as the gold
   stop it replaces, at that theme's own hue and the highest saturation that
   luminance allows. Contrast is a function of relative luminance alone, so
   this makes every accent-on-ground and accent-on-enclosure ratio equal to or
   better than gold's. Grounds and darks were then checked pair by pair. Two
   pairs still needed a real adjustment and both are recorded in the blocks
   below: --accent-on-enc, where a dark accent is too dark to be a link on its
   own enclosure, and --on-accent, where the label sitting on a filled accent
   button has to flip from dark to light. Where flipping was not enough the
   accent's own lightness was nudged, hue and saturation held, until the
   button label cleared 4.5 to 1. Those nudges are noted per theme.

   WHAT THIS FILE DOES NOT TOUCH. The material ramp (--pla, --petg, --tpu,
   --abs, --resin, --wood, --acrylic, --metal, --fabric) is functional colour.
   It doubles as the map legend, it is always paired with a letter glyph, and
   it is identical in all six themes. Status colour (--ok, --err, --warn) and
   WhatsApp green stay too.

   COLLISIONS. Because the ramp cannot move, an accent that lands on top of a
   material is a real cost. Perceptual distance (CIE76) from each accent to
   its nearest functional colour, gold included. Under roughly dE 25 the two
   read as the same colour at chip size, so gold's own dE 21 is the bar:

     lime        dE 36 to Resin     clear
     blue        dE 31 to TPU       clear
     gold        dE 21 to warn      at the bar
     orange      dE 21 to PLA       at the bar
     teal        dE 16 to PETG      BELOW the bar
     terracotta  dE  9 to err       BELOW the bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED THEME LAYER
   Applies only to elements carrying a data-theme, so the no attribute default
   is never affected. These rules exist because a handful of colours are
   written into the pages themselves rather than into the palette, and those
   pages are not editable from here.
   -------------------------------------------------------------------------- */
[data-theme] {
  /* The accent as it appears on the dark enclosure. Gold at 7.36 to 1 on its
     own enclosure ground is the bar. A dark accent such as the electric blue
     reaches only 4.24 to 1 there, so those themes point this at a brightened
     step. The light ground keeps the true accent, where being dark is an
     advantage rather than a problem. */
  --accent-on-enc: var(--accent);
  /* Text sitting ON a filled accent: the accent button, the demo badge, the
     layer step numbers, the dashboard counters. The base stylesheet writes
     var(--graphite) there, which is right only while the accent is light.
     Terracotta and electric blue are dark enough that a dark label on them
     fails, so those blocks flip this to the light side. */
  --on-accent: var(--graphite);
  /* An immutable copy of the same value, so the accent button can restore it
     after a dark surface has overridden --on-accent for its own fills. */
  --on-accent-base: var(--graphite);
  /* The second glow in every enclosure section is a fixed teal in the base
     stylesheet, which strands a green cast in the dark sections of every non
     teal theme. Each block below repoints it. */
  --enc-glow-2: 31,162,148;
  /* The hero photograph, see the block at the end of this file. */
  --hero-filter: blur(3px) saturate(.9);
}

/* On a dark surface the accent brightens. This is done by redefining --gold
   on the surface rather than by overriding the rules that read it, which
   matters: the base stylesheet already resolves conflicts by specificity
   (.enclosure .btn-gold beats .enclosure a, .enclosure .topbar .brand beats
   both), and any [data-theme] prefixed rule would outrank all of them and
   flatten those decisions. Redefining the variable inherits instead, so every
   var(--gold) inside a dark surface brightens and every rule that deliberately
   opted out of the accent stays opted out. --on-accent goes back to the dark
   side here for the same reason: on a brightened fill the label must be dark
   again. */
[data-theme] .enclosure,
[data-theme] .plate.dark,
[data-theme] .dash-top {
  --gold: var(--accent-on-enc);
  --on-accent: var(--graphite);
}
/* Everything that is FILLED with the accent and carries text on top is the
   exception to that brightening. A link or a hairline on the dark has to
   brighten to stay readable against the ground, but a filled shape is judged
   against its own label, not against the ground, so it should keep the real
   brand colour and let the label adapt instead. Without this the button, the
   step badges and the counters all turn pastel on a dark accent, and the
   scheme stops showing its actual 10 percent colour where it matters most. */
[data-theme] .enclosure .btn-gold, [data-theme] .plate.dark .btn-gold, [data-theme] .dash-top .btn-gold,
[data-theme] .enclosure .badge-gold, [data-theme] .plate.dark .badge-gold,
[data-theme] .enclosure .layer-step .n, [data-theme] .plate.dark .layer-step .n,
[data-theme] .enclosure .layer-row.gold, [data-theme] .plate.dark .layer-row.gold,
[data-theme] .enclosure .chip[aria-pressed="true"] .cnt,
[data-theme] .dash-top .chip[aria-pressed="true"] .cnt { --gold: var(--accent); --on-accent: var(--on-accent-base); }
[data-theme] .btn-gold,
[data-theme] .badge-gold,
[data-theme] .spool.demo::after,
[data-theme] .layer-step .n,
[data-theme] .chip[aria-pressed="true"] .cnt { color: var(--on-accent); }

/* The headline gradient on a dark section ends on the true accent. Hebrew is
   read right to left and this gradient runs left to right, so that last stop
   is the FIRST thing read, and on a dark accent it lands too dark. Ending on
   the brightened step instead fixes the opening word. For gold the two are
   the same colour, so nothing moves. */
[data-theme] .enclosure .grad-text,
[data-theme] .plate.dark .grad-text {
  background: linear-gradient(100deg, var(--accent-glow) 0%, var(--accent-bright) 45%, var(--accent-on-enc) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Landing page inline rules that name gold directly. The glyphs are data
   URIs, so they cannot read a custom property; each theme supplies its own
   pre-coloured copy instead. */
[data-theme] .tier .ticks li::before { background-image: var(--tick-deep); }
[data-theme] .tier.gold .ticks li::before { background-color: rgba(var(--graphite-rgb),.9); background-image: var(--tick-accent); }
[data-theme] .tier.dark .ticks li::before { background-color: rgba(var(--accent-rgb),.18); background-image: var(--tick-accent); }
[data-theme] .qa summary::after { background-image: var(--plus-deep); }
[data-theme] footer.site .f-art .tag { background: rgba(var(--dark-1-rgb),.7); }
[data-theme] footer.site .f-cta .btn-ghost { border-color: rgba(var(--powder-rgb),.22); }
[data-theme] footer.site .f-cta .btn-ghost:hover { border-color: rgba(var(--powder-rgb),.5); }

[data-theme] .enclosure {
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(var(--accent-rgb),.20), transparent 62%),
    radial-gradient(700px 400px at 5% 110%, rgba(var(--enc-glow-2),.10), transparent 60%),
    linear-gradient(var(--enc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px),
    var(--enc);
  background-size: auto, auto, 26px 26px, 26px 26px, auto;
}
[data-theme] .enclosure.plain { background: linear-gradient(var(--enc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px), var(--enc); background-size: 26px 26px, 26px 26px, auto; }

/* The headline gradient on a dark section ends on the true accent. Hebrew is
   read right to left and this gradient runs left to right, so that last stop
   is the FIRST thing read, and on a dark accent it lands too dark. Ending on
   the brightened step instead fixes the opening word. For gold the two are
   the same colour, so nothing moves. */
[data-theme] .enclosure .grad-text,
[data-theme] .plate.dark .grad-text {
  background: linear-gradient(100deg, var(--accent-glow) 0%, var(--accent-bright) 45%, var(--accent-on-enc) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Landing page inline rules that name gold directly. The glyphs are data
   URIs, so they cannot read a custom property; each theme supplies its own
   pre-coloured copy instead. */
[data-theme] .tier .ticks li::before { background-image: var(--tick-deep); }
[data-theme] .tier.gold .ticks li::before { background-color: rgba(var(--graphite-rgb),.9); background-image: var(--tick-accent); }
[data-theme] .tier.dark .ticks li::before { background-color: rgba(var(--accent-rgb),.18); background-image: var(--tick-accent); }
[data-theme] .qa summary::after { background-image: var(--plus-deep); }
[data-theme] footer.site .f-art .tag { background: rgba(var(--dark-1-rgb),.7); }
[data-theme] footer.site .f-cta .btn-ghost { border-color: rgba(var(--powder-rgb),.22); }
[data-theme] footer.site .f-cta .btn-ghost:hover { border-color: rgba(var(--powder-rgb),.5); }

/* The hero scrim is written as a literal near black in the landing page, so a
   petrol or espresso theme would otherwise show a graphite veil over its own
   dark ground. */
[data-theme] #top .hero-bg img { filter: var(--hero-filter); }
[data-theme] #top .hero-bg::after { background:
  linear-gradient(180deg, rgba(var(--dark-1-rgb),.92) 0%, rgba(var(--dark-1-rgb),.62) 38%, rgba(var(--dark-1-rgb),.7) 72%, var(--enc) 100%),
  linear-gradient(270deg, rgba(var(--dark-1-rgb),.9) 0%, rgba(var(--dark-1-rgb),.55) 45%, rgba(var(--dark-1-rgb),.2) 100%),
  linear-gradient(var(--enc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px; }
@media (max-width: 899px) {
  [data-theme] #top .hero-bg::after { background:
    linear-gradient(180deg, rgba(var(--dark-1-rgb),.94) 0%, rgba(var(--dark-1-rgb),.66) 30%, rgba(var(--dark-1-rgb),.78) 60%, var(--enc) 100%),
    linear-gradient(var(--enc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px);
    background-size: auto, 26px 26px, 26px 26px; }
}

/* --------------------------------------------------------------------------
   GOLD
   60  Powder     #F5F2EC      30  Graphite       #22262B      10  PEI Gold       #C9A227
   the pilot palette, unchanged. Every other theme is measured against this one.
   Nearest functional colour: warn at dE 21.
   -------------------------------------------------------------------------- */
:root[data-theme="gold"] {
  /* ---- 60, the ground ---- */
  --powder: #F5F2EC;
  --powder-rgb: 245,242,236;
  --powder-lift: #F4F1EA;
  --paper: #FCFAF6;
  --paper-rgb: 252,250,246;
  --line: #DFD9CC;
  --line-soft: #EBE6DB;
  --glass: #E9EDF0;

  /* ---- 30, the structure and the enclosure steps ---- */
  --graphite: #22262B;
  --graphite-rgb: 34,38,43;
  --dark-1: #15181C;
  --dark-1-rgb: 21,24,28;
  --dark-2: #1D2126;
  --dark-3: #262B31;
  --dark-0-rgb: 20,23,27;
  --ink-soft: #3A4046;
  --steel: #8B939E;
  --steel-text: #5C6672;
  --steel-soft: #A5ACB5;
  --on-enc-steel: #B9C0C9;

  /* ---- 10, the accent, lightest to deepest ---- */
  --accent-wash: #FBF3D6;
  --accent-pale: #F3E4A8;
  --accent-pale-warm: #F1E2A6;
  --accent-sand: #E9D27A;
  --accent-glow: #FFE894;
  --accent-light: #F0D779;
  --accent-kicker: #E8C765;
  --accent-bright: #E4C65A;
  --accent: #C9A227;
  --accent-rgb: 201,162,39;
  --accent-dim: #9C7A1A;
  --accent-deep: #7A6112;
  --accent-ink: #6B5410;
  --accent-on-enc: var(--accent);   /* 7.36 to 1 on its own enclosure, no lift needed */
  --on-accent: var(--graphite);   /* label on a filled accent, 6.29 to 1 (the other side is 2.17) */
  --on-accent-base: var(--graphite);
  --enc-glow-2: 31,162,148;

  /* ---- landing page glyphs, and the hero photograph ---- */
  --tick-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6112' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --tick-accent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --plus-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6112' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hero-filter: blur(3px) saturate(.9);
}

/* --------------------------------------------------------------------------
   ORANGE, WHITE, BLACK
   60  White      #F7F6F5      30  Near black     #141517      10  Signal orange  #FF6A1F
   the proposal that tested strongest. A white page and a true near black, so the orange is the only colour in the room. The dark is neutral rather than blue, so the orange never turns muddy against it.
   Nearest functional colour: PLA at dE 21.
   -------------------------------------------------------------------------- */
:root[data-theme="orange"] {
  /* ---- 60, the ground ---- */
  --powder: #F7F6F5;
  --powder-rgb: 247,246,245;
  --powder-lift: #F5F4F3;
  --paper: #FFFFFF;
  --paper-rgb: 255,255,255;
  --line: #E2DFDC;
  --line-soft: #EFEDEB;
  --glass: #EBEAE9;

  /* ---- 30, the structure and the enclosure steps ---- */
  --graphite: #141517;
  --graphite-rgb: 20,21,23;
  --dark-1: #0A0B0C;
  --dark-1-rgb: 10,11,12;
  --dark-2: #121315;
  --dark-3: #1B1D20;
  --dark-0-rgb: 9,10,11;
  --ink-soft: #3F3F41;
  --steel: #919295;
  --steel-text: #646567;
  --steel-soft: #ABACAD;
  --on-enc-steel: #BFC0C1;

  /* ---- 10, the accent, lightest to deepest ---- */
  --accent-wash: #FDF1EA;
  --accent-pale: #F9DFD1;
  --accent-pale-warm: #F7DCCF;
  --accent-sand: #F3CAB6;
  --accent-glow: #FFE3D6;
  --accent-light: #F7D0BB;
  --accent-kicker: #F2BFA6;
  --accent-bright: #F0BDA4;
  --accent: #FF6A1F;
  --accent-rgb: 255,106,31;
  --accent-dim: #CF5C23;
  --accent-deep: #A64818;
  --accent-ink: #903F16;
  --accent-on-enc: #FF7630;   /* #FF6A1F alone is 6.88 to 1 on this dark, this step is 7.40 */
  --on-accent: var(--graphite);   /* label on a filled accent, 6.38 to 1 (the other side is 2.65) */
  --on-accent-base: var(--graphite);
  --enc-glow-2: 240,189,164;

  /* ---- landing page glyphs, and the hero photograph ---- */
  --tick-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A64818' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --tick-accent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A1F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --plus-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A64818' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hero-filter: blur(3px) hue-rotate(-18deg) saturate(1.8) brightness(.9);
}

/* --------------------------------------------------------------------------
   WORKSHOP LIME
   60  Bone       #F6F7F1      30  Workshop black #1B1E18      10  Workshop lime  #A6CE1B
   a workshop wall, not a tech brand. The dark carries a trace of green so the lime reads as machine paint rather than highlighter. The most ownable of the six and the furthest from anything in the material ramp.
   Nearest functional colour: Resin at dE 36.
   -------------------------------------------------------------------------- */
:root[data-theme="lime"] {
  /* ---- 60, the ground ---- */
  --powder: #F6F7F1;
  --powder-rgb: 246,247,241;
  --powder-lift: #F4F5EF;
  --paper: #FCFDF8;
  --paper-rgb: 252,253,248;
  --line: #DEE1D0;
  --line-soft: #EAECDF;
  --glass: #E8EBE2;

  /* ---- 30, the structure and the enclosure steps ---- */
  --graphite: #1B1E18;
  --graphite-rgb: 27,30,24;
  --dark-1: #0F1210;
  --dark-1-rgb: 15,18,16;
  --dark-2: #171A15;
  --dark-3: #20241D;
  --dark-0-rgb: 14,17,15;
  --ink-soft: #3D413B;
  --steel: #8E958C;
  --steel-text: #60675D;
  --steel-soft: #A7ADA5;
  --on-enc-steel: #BBC1BA;

  /* ---- 10, the accent, lightest to deepest ---- */
  --accent-wash: #EDF9C1;
  --accent-pale: #D7EE87;
  --accent-pale-warm: #D5EC86;
  --accent-sand: #BEE147;
  --accent-glow: #C3FC00;
  --accent-light: #BEE82D;
  --accent-kicker: #AFD920;
  --accent-bright: #AED723;
  --accent: #A6CE1B;
  --accent-rgb: 166,206,27;
  --accent-dim: #6F8817;
  --accent-deep: #576C10;
  --accent-ink: #4C5E0E;
  --accent-on-enc: #8DAF17;   /* #A6CE1B alone is 10.29 to 1 on this dark, this step is 7.43 */
  --on-accent: var(--graphite);   /* label on a filled accent, 9.21 to 1 (the other side is 1.70) */
  --on-accent-base: var(--graphite);
  --enc-glow-2: 174,215,35;

  /* ---- landing page glyphs, and the hero photograph ---- */
  --tick-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576C10' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --tick-accent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6CE1B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --plus-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576C10' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hero-filter: blur(3px) hue-rotate(43deg) saturate(.9) brightness(1.12);
}

/* --------------------------------------------------------------------------
   TEAL ON CREAM
   60  Cream      #F6F2E9      30  Deep petrol    #16282E      10  Teal           #0E9CA9
   warm cream against a deep petrol dark, so the teal sits between two temperatures instead of on a cold page. Read the collision note above before shipping this one.
   Nearest functional colour: PETG at dE 16.
   -------------------------------------------------------------------------- */
:root[data-theme="teal"] {
  /* ---- 60, the ground ---- */
  --powder: #F6F2E9;
  --powder-rgb: 246,242,233;
  --powder-lift: #F4F0E7;
  --paper: #FDFAF3;
  --paper-rgb: 253,250,243;
  --line: #DFD6C6;
  --line-soft: #ECE5D8;
  --glass: #E2EBEA;

  /* ---- 30, the structure and the enclosure steps ---- */
  --graphite: #16282E;
  --graphite-rgb: 22,40,46;
  --dark-1: #0A1D24;
  --dark-1-rgb: 10,29,36;
  --dark-2: #11262D;
  --dark-3: #193038;
  --dark-0-rgb: 9,27,34;
  --ink-soft: #304348;
  --steel: #7698A1;
  --steel-text: #496B74;
  --steel-soft: #94B1B8;
  --on-enc-steel: #A7C4CD;

  /* ---- 10, the accent, lightest to deepest ---- */
  --accent-wash: #DAF8FB;
  --accent-pale: #B1EFF4;
  --accent-pale-warm: #AEEDF2;
  --accent-sand: #82E1EA;
  --accent-glow: #9EF7FF;
  --accent-light: #82E8F1;
  --accent-kicker: #5FDCE7;
  --accent-bright: #5DD9E5;
  --accent: #0E9CA9;
  --accent-rgb: 14,156,169;
  --accent-dim: #198B96;
  --accent-deep: #126F77;
  --accent-ink: #106168;
  --accent-on-enc: #11BACA;   /* #0E9CA9 alone is 5.23 to 1 on this dark, this step is 7.33 */
  --on-accent: var(--graphite);   /* label on a filled accent, 4.61 to 1 (the other side is 2.96) */
  --on-accent-base: var(--graphite);
  --enc-glow-2: 93,217,229;

  /* ---- landing page glyphs, and the hero photograph ---- */
  --tick-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126F77' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --tick-accent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9CA9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --plus-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126F77' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hero-filter: blur(3px) hue-rotate(140deg) saturate(1.2) brightness(1.06);
}

/* --------------------------------------------------------------------------
   TERRACOTTA ON SAND
   60  Sand       #F8F1E6      30  Espresso       #2B1E17      10  Terracotta     #B04F2C
   sand and espresso, the only earthy scheme. Reads handmade rather than industrial. Read the collision note above before shipping this one.
   Nearest functional colour: err at dE 9.
   -------------------------------------------------------------------------- */
:root[data-theme="terracotta"] {
  /* ---- 60, the ground ---- */
  --powder: #F8F1E6;
  --powder-rgb: 248,241,230;
  --powder-lift: #F6EFE4;
  --paper: #FEF9F1;
  --paper-rgb: 254,249,241;
  --line: #E5D6C2;
  --line-soft: #F0E7D8;
  --glass: #EEE4D6;

  /* ---- 30, the structure and the enclosure steps ---- */
  --graphite: #2B1E17;
  --graphite-rgb: 43,30,23;
  --dark-1: #1B120D;
  --dark-1-rgb: 27,18,13;
  --dark-2: #241812;
  --dark-3: #2F2119;
  --dark-0-rgb: 25,17,12;
  --ink-soft: #4D3C32;
  --steel: #A98C7C;
  --steel-text: #7E5E4C;
  --steel-soft: #BEA799;
  --on-enc-steel: #D2BAAD;

  /* ---- 10, the accent, lightest to deepest ---- */
  --accent-wash: #FDF0EC;
  --accent-pale: #F9DFD5;
  --accent-pale-warm: #F8DDD3;
  --accent-sand: #F4CABA;
  --accent-glow: #FFE3D8;
  --accent-light: #F8CFC1;
  --accent-kicker: #F3BFAC;
  --accent-bright: #F1BCA9;
  --accent: #B04F2C;
  --accent-rgb: 176,79,44;
  --accent-dim: #D75424;
  --accent-deep: #AD4119;
  --accent-ink: #973917;
  --accent-on-enc: #DD9175;   /* #B04F2C alone is 3.51 to 1 on this dark, this step is 7.36 */
  --on-accent: var(--powder);   /* label on a filled accent, 4.68 to 1 (the other side is 3.08) */
  --on-accent-base: var(--powder);
  --enc-glow-2: 241,188,169;

  /* ---- landing page glyphs, and the hero photograph ---- */
  --tick-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD4119' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --tick-accent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B04F2C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --plus-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD4119' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hero-filter: blur(3px) hue-rotate(-22deg) saturate(1.2) brightness(.9);
}

/* --------------------------------------------------------------------------
   ELECTRIC BLUE
   60  Cool white #F6F7FA      30  Deep ink       #171C2C      10  Electric blue  #2262FF
   the most conventionally techy scheme, and the safest on contrast: the blue is dark enough to be readable as small text on the light ground, which no other accent here manages.
   Nearest functional colour: TPU at dE 31.
   -------------------------------------------------------------------------- */
:root[data-theme="blue"] {
  /* ---- 60, the ground ---- */
  --powder: #F6F7FA;
  --powder-rgb: 246,247,250;
  --powder-lift: #F4F5F9;
  --paper: #FDFDFF;
  --paper-rgb: 253,253,255;
  --line: #DBDFE9;
  --line-soft: #E9ECF3;
  --glass: #E7EBF3;

  /* ---- 30, the structure and the enclosure steps ---- */
  --graphite: #171C2C;
  --graphite-rgb: 23,28,44;
  --dark-1: #0B0F1E;
  --dark-1-rgb: 11,15,30;
  --dark-2: #131829;
  --dark-3: #1C2234;
  --dark-0-rgb: 10,14,28;
  --ink-soft: #383F51;
  --steel: #8993AB;
  --steel-text: #586586;
  --steel-soft: #A4ACC0;
  --on-enc-steel: #B8BFD4;

  /* ---- 10, the accent, lightest to deepest ---- */
  --accent-wash: #EEF3FD;
  --accent-pale: #DAE4FA;
  --accent-pale-warm: #D9E2F9;
  --accent-sand: #C4D2F5;
  --accent-glow: #DFE8FF;
  --accent-light: #CAD7F9;
  --accent-kicker: #B8CAF4;
  --accent-bright: #B6C7F3;
  --accent: #2262FF;
  --accent-rgb: 34,98,255;
  --accent-dim: #4F7AE2;
  --accent-deep: #2259DE;
  --accent-ink: #1D4DC2;
  --accent-on-enc: #779EFF;   /* #2262FF alone is 3.87 to 1 on this dark, this step is 7.37 */
  --on-accent: var(--powder);   /* label on a filled accent, 4.60 to 1 (the other side is 3.44) */
  --on-accent-base: var(--powder);
  --enc-glow-2: 182,199,243;

  /* ---- landing page glyphs, and the hero photograph ---- */
  --tick-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232259DE' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --tick-accent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232262FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --plus-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232259DE' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --hero-filter: blur(3px) hue-rotate(-165deg) saturate(2.1) brightness(.95);
}


/* ==========================================================================
   THE HERO PHOTOGRAPH
   --------------------------------------------------------------------------
   assets/img/hero-bed.webp is now a blurred evening market (the scene of the
   hero film); the gold spiral vase on a dark printer bed that everything below
   was measured on is kept, unused, as hero-bed-print.webp for a revert. The
   notes stay because they explain the angles: on the vase, the gold was baked
   into the pixels, so on a non gold theme the first thing anyone saw would
   otherwise have been the old accent. On the market the same rotation only
   shifts the warm lamp light, and nothing in that frame was measured.

   WHAT SHIPS: a per theme hue rotation on the photograph, set as
   --hero-filter in each block above.

   Why it works here, and would not work on an arbitrary photo. CSS
   hue-rotate() and saturate() are both linear colour matrices, and both map
   grey to grey. In this frame the only saturated thing is the vase; the bed,
   the gantry and the wall are near neutral. So a rotation moves the printed
   object and leaves the machine alone, which is the edit a person would make
   by hand. The angles are not eyeballed: the vase pixels were isolated, the
   CSS matrix was applied numerically across the whole angle and saturation
   range, and the chain that lands the vase's mean hue on the theme accent was
   kept. All six land within 1.5 degrees of their target.

   REJECTED, sepia() then hue-rotate(). The usual trick for forcing a photo to
   one hue. It tints the bed and the wall as well as the vase, so the dark
   ground inside the photograph stops matching the enclosure around it and the
   whole hero reads as a colour cast rather than a coloured object.

   REJECTED, dropping the photograph for the generative toolpath background.
   It is already themeable and it would have been the cheap answer, but the
   hero then has no photographic texture at all, and the one thing the page
   has to prove above the fold is that real machines make real objects.
   Losing the photograph costs more than recolouring it does.

   REJECTED, an accent coloured overlay in mix-blend-mode: color. It does
   recolour cleanly, but blending to a single hue flattens the vase's own
   light and shade into one tint and the object stops reading as a printed
   surface.

   THE HONEST CAVEAT. Gold is still the theme the photograph was shot for.
   Every other scheme is a recolour of the same object, and lime is the
   weakest of them, because rotating a warm gold into yellow green lands near
   olive. If a scheme other than gold is chosen, reshoot or re-render the hero
   in the real filament colour and set that theme's --hero-filter back to
   blur(3px) saturate(.9).
   ========================================================================== */