/* THE CURTAIN BETWEEN STUDIO PAGES, IN THE COLOUR THE PAGE WILL ARRIVE IN.
 *
 * Every product is its own document, so a move in the rail paints <html> before the app's
 * styles land. Each index.html set that colour as a literal measured on the DEFAULT tint
 * (#dce0e1 light, #1c2129 dark), so on any other tint the move flashed a cool grey and then
 * the warm page (theme audit 01.11.2026: #e9ddd4 on amber, #262225 on blush). This sheet is
 * linked render-blocking at the end of each <head>, after those literals, and paints the
 * ground with the very formula the studio uses for it:
 *
 *   --hub-wbody = mix(tint, --tint-w-deep, --tint-deep)        shared/studio/chrome.css
 *   --dr-ground = mix(--hub-wbody, 100% - --dr-sink, #000)       shared/studio/drafting.css §0
 *
 * light modern: 9% on #f2f0e9, sink 3% · dark modern: 7% on #1c1d20, sink 10%
 * light classic: 9% on #f1efe6, sink 3% · dark classic: 6% on #17181a, sink 10%
 * Change a number there and change it here — they are one colour written twice.
 *
 * Plain CSS on purpose: data-tint is set by the inline boot script before this sheet
 * applies, and a live tint change re-matches the selectors with no script at all. The
 * tint list is shared/hooks/useTint.ts; the hexes are global.css's --tint-base.
 */
html[data-tint="amber"]{--tg:#e2714a}
html[data-tint="tangerine"]{--tg:#e08b2e}
html[data-tint="brass"]{--tg:#c99236}
html[data-tint="lemon"]{--tg:#d4b83c}
html[data-tint="sand"]{--tg:#c2a878}
html[data-tint="cocoa"]{--tg:#b5825f}
html[data-tint="olive"]{--tg:#8a8f45}
html[data-tint="lime"]{--tg:#7ba83a}
html[data-tint="grass"]{--tg:#6aad4f}
html[data-tint="pine"]{--tg:#35935f}
html[data-tint="emerald"]{--tg:#3f9e74}
html[data-tint="mint"]{--tg:#4fbfa0}
html[data-tint="teal"]{--tg:#2e9fa8}
html[data-tint="ice"]{--tg:#5fb3cc}
html[data-tint="sky"]{--tg:#6fa8dc}
html[data-tint="azure"]{--tg:#4a86e0}
html[data-tint="indigo"]{--tg:#6f74d6}
html[data-tint="lavender"]{--tg:#8b86d9}
html[data-tint="violet"]{--tg:#a95fd6}
html[data-tint="plum"]{--tg:#b063a6}
html[data-tint="magenta"]{--tg:#d2489e}
html[data-tint="rose"]{--tg:#dd6a92}
html[data-tint="cherry"]{--tg:#d4566d}
html[data-tint="garnet"]{--tg:#cf5250}
html[data-tint="slate"]{--tg:#8593a8}
html[data-tint="cream"]{--tg:#d8b386}
html[data-tint="peach"]{--tg:#f0a98a}
html[data-tint="blush"]{--tg:#eaa3a8}
html[data-tint="powder"]{--tg:#d9aec8}
html[data-tint="latte"]{--tg:#c9a38a}

/* Each selector is one step more specific than the literal it replaces in index.html, so
   the order of the two in <head> does not matter. */
html[data-tint][data-style][data-mode]{
  background-color:color-mix(in srgb, color-mix(in srgb, var(--tg, #4a86e0) 9%, #f2f0e9) 97%, #000);
}
html[data-tint][data-style="classic"][data-mode]{
  background-color:color-mix(in srgb, color-mix(in srgb, var(--tg, #4a86e0) 9%, #f1efe6) 97%, #000);
}
html[data-tint][data-style][data-mode].dark{
  background-color:color-mix(in srgb, color-mix(in srgb, var(--tg, #4a86e0) 7%, #1c1d20) 90%, #000);
}
html[data-tint][data-style="classic"][data-mode].dark{
  background-color:color-mix(in srgb, color-mix(in srgb, var(--tg, #4a86e0) 6%, #17181a) 90%, #000);
}