/* ===========================================================================
 * THE THEME — their colour, and gradient or one block colour.
 * Loads LAST, after app.css and chrome.css, because it corrects them.
 *
 * Three jobs:
 *   1. GRADIENT OR FLAT. A real switch on the world itself, not a preference
 *      that sits in a settings panel doing nothing.
 *   2. THE TEXT ACCENT. Her c2 is the right colour for a 5rem number and the
 *      wrong colour for 13px type: on white glass it reads 4.00:1 for Sky and
 *      3.48:1 for Amber, both under AA. Small text now uses --c2-text, which
 *      is the same colour darkened until it clears 4.5:1 on white glass AND
 *      on the pale day world. The big flashes of colour are untouched.
 *   3. DAY. Day was a real design for the panels and never finished on the
 *      world: white text on a pale world, a dark wash behind dark type in the
 *      bar, and the light accent on pale headings. Those are fixed here in her
 *      own vocabulary, following the pattern the .prod toggle already set.
 *
 * Nothing here invents a material, a radius or a shadow. It sets colours.
 * ======================================================================== */

/* -------------------------------------------------- the two added variables */
:root{
  /* the accent that lands on the world itself */
  --onworld-accent:var(--c3);
  /* small text on white glass. Overridden per scheme below. */
  --c2-text:var(--c2);
  /* the one block colour, when they pick flat */
  --flat:var(--c1);
}

/* Per scheme: the readable accent, and the block colour.
   Computed to hit a luminance target, not chosen by eye. The readings are in
   the proof at MARID BUILD/tests/prove-the-themes.mjs. */
html[data-hue="ocean"]  {--c2-text:#0a6e7f;--flat:#05414e}
html[data-hue="sky"]    {--c2-text:#146899;--flat:#083c5a}
html[data-hue="cobalt"] {--c2-text:#1f55d6;--flat:#0a2a66}
html[data-hue="leaf"]   {--c2-text:#127352;--flat:#083a2e}
html[data-hue="moss"]   {--c2-text:#477028;--flat:#233a1a}
html[data-hue="amber"]  {--c2-text:#8f5b0d;--flat:#4a2e05}
html[data-hue="copper"] {--c2-text:#9d4c1b;--flat:#3b1a0a}
html[data-hue="scarlet"]{--c2-text:#b8232f;--flat:#4a0d16}
html[data-hue="rose"]   {--c2-text:#b2265f;--flat:#4d0b2c}
html[data-hue="plum"]   {--c2-text:#873cac;--flat:#2e0c47}
html[data-hue="silver"] {--c2-text:#556274;--flat:#38424e}
html[data-hue="pewter"] {--c2-text:#4a617a;--flat:#1c2733}
html[data-hue="pearl"]  {--c2-text:#63607c;--flat:#3a3548}

/* In day the block colour is the pale mid tone of the same hue, so flat is a
   real light design rather than a dark panel with light type on it. */
html[data-theme="day"][data-hue="ocean"]  {--flat:#d6ecf1}
html[data-theme="day"][data-hue="sky"]    {--flat:#d4e8f8}
html[data-theme="day"][data-hue="cobalt"] {--flat:#dbe2fb}
html[data-theme="day"][data-hue="leaf"]   {--flat:#d6efe4}
html[data-theme="day"][data-hue="moss"]   {--flat:#e3eed4}
html[data-theme="day"][data-hue="amber"]  {--flat:#f8ead0}
html[data-theme="day"][data-hue="copper"] {--flat:#f8e2d1}
html[data-theme="day"][data-hue="scarlet"]{--flat:#f9dcdd}
html[data-theme="day"][data-hue="rose"]   {--flat:#f8d9e7}
html[data-theme="day"][data-hue="plum"]   {--flat:#ead9f5}
html[data-theme="day"][data-hue="silver"] {--flat:#dfe4ea}
html[data-theme="day"][data-hue="pewter"] {--flat:#d9e1ea}
html[data-theme="day"][data-hue="pearl"]  {--flat:#e8e4f1}

/* Day turns the light accent into the dark one, because a light accent on a
   pale world cannot be read at any size. */
html[data-theme="day"]{ --onworld-accent:var(--c2-text) }

/* ==================================================== GRADIENT OR FLAT =====
 * Her words: "whether they want gradient or if they just want one block
 * colour, they should be able to select that."
 * Flat means flat: no radial washes, no drifting blobs, one colour.
 * ======================================================================== */
html{ background:var(--deep) }                    /* so the real world colour is
                                                     what sits behind the type */
html[data-fill="flat"]{ background:var(--flat) }
html[data-fill="flat"] .world{ background:var(--flat) }
html[data-fill="flat"] .world::before{ background:var(--flat) }
html[data-fill="flat"] .world i{ display:none }

/* ==================================================== THE TEXT ACCENT ======
 * Only text moves to the readable accent. Every dot, bar, rule and glow keeps
 * her original colour, so the look does not change — only what can be read.
 * ======================================================================== */
.step.yours h3::after{ color:var(--c2-text) }
.kind.buying         { color:var(--c2-text) }
.asst .kind.person   { color:var(--c2-text) }
.mark.hu             { color:var(--c2-text) }
.fstep .tx span em   { color:var(--c2-text) }
.aic .pv             { color:var(--c2-text) }
.m.hu .by            { color:var(--c2-text) }
.m.hu .b             { background:var(--c2-text) }   /* white type sits on it */
.sheet .quote        { border-left-color:var(--c2-text) }

/* …and the accent that lands on the world, not on glass. */
.day.today h3        { color:var(--onworld-accent) }
.from .src b         { color:var(--onworld-accent) }

/* ============================================================== DAY ========
 * Finishing the light design. Every rule here corrects a colour that was
 * written for the dark world and left white in day.
 * ======================================================================== */
html[data-theme="day"] .world::before{
  background:
    radial-gradient(70% 60% at 86% -8%, var(--c1), transparent 64%),
    radial-gradient(60% 70% at -6% 104%, var(--c1), transparent 66%),
    linear-gradient(165deg, var(--c1) 0%, var(--deep) 62%)}
html[data-theme="day"] .world i{ opacity:.14 }
html[data-theme="day"] .world::after{ opacity:.04 }

/* the sticky bar had a dark wash under dark type */
html[data-theme="day"] .bar{
  background:linear-gradient(rgba(255,255,255,.74),rgba(255,255,255,.36));
  border-bottom-color:rgba(13,26,29,.09)}

/* everything that was hard-coded #fff because the world used to be dark */
html[data-theme="day"] .wm,
html[data-theme="day"] .seg a,
html[data-theme="day"] .mode button,
html[data-theme="day"] .client,
html[data-theme="day"] .back,
html[data-theme="day"] .info,
html[data-theme="day"] .no,
html[data-theme="day"] .chp,
html[data-theme="day"] .to span,
html[data-theme="day"] .held .st,
html[data-theme="day"] .lib,
html[data-theme="day"] .empty,
html[data-theme="day"] .none,
html[data-theme="day"] .uses,
html[data-theme="day"] .tier,
html[data-theme="day"] .aic.add,
html[data-theme="day"] .sech,
html[data-theme="day"] .ask>.label,
html[data-theme="day"] .flow .lb{ color:var(--ink) }

/* the selected pill: ink filled, the way the product toggle already does it */
html[data-theme="day"] .seg a.on,
html[data-theme="day"] .mode button.on{ background:var(--ink);color:#fff }
html[data-theme="day"] .seg a:hover,
html[data-theme="day"] .mode button:hover,
html[data-theme="day"] .no:hover,
html[data-theme="day"] .back:hover,
html[data-theme="day"] .info:hover,
html[data-theme="day"] .client:hover{ background:rgba(13,26,29,.09) }
html[data-theme="day"] .empty,
html[data-theme="day"] .none{ border-color:rgba(13,26,29,.18) }

/* ===========================================================================
 * THE BRAND PANEL — the few pieces Your brand → Your colour needs that app.css
 * does not already have. Everything else in that panel is her own vocabulary:
 * .cl.hues for the schemes, .opt for gradient-or-flat, .row for a setting,
 * .swl for the swatch list, .sech.sm for a heading, details for a fold.
 *
 * The operator back end loads this same file and does not use any of it.
 * ======================================================================== */

/* a small secondary button, for a row rather than a footer */
.no.sm{height:44px;padding:0 18px;font-size:.95rem;flex:0 0 auto;cursor:pointer}
label.no.sm{display:inline-flex;align-items:center;justify-content:center}

/* the round swatch that starts a row */
.row>i.ownsw,.row>i.logosw{width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.18)}
.row>i.logosw.empty{background:rgba(10,20,22,.08);box-shadow:inset 0 0 0 2px rgba(10,20,22,.12)}

/* the native colour picker, made the same size as everything else in a row */
.ownpick{width:58px;height:44px;padding:0;border:1px solid rgba(10,20,22,.14);border-radius:12px;
  background:#fff;flex:0 0 auto;cursor:pointer}
.ownpick::-webkit-color-swatch-wrapper{padding:4px}
.ownpick::-webkit-color-swatch{border:0;border-radius:8px}
.ownpick::-moz-color-swatch{border:0;border-radius:8px}

/* flat mode paints the scheme buttons flat too, so the choice shows itself */
.cl.hues button b{position:relative;z-index:1}

/* their logo, where their identity already is: the business button in the bar */
.client .dot.haslogo{width:30px;height:30px;border-radius:9px;background-size:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.3)}
.client .dot.haslogo.asinitials{display:grid;place-items:center;background:var(--c2);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;line-height:1}
html[data-theme="day"] .client .dot.haslogo{box-shadow:0 0 0 2px rgba(13,26,29,.14),0 2px 8px rgba(16,40,50,.18)}
html[data-theme="day"] .client .dot.haslogo.asinitials{background:var(--c2-text)}

/* a preview is somebody looking, not somebody working: nothing in the frame
   offers to switch business, because it is not theirs to switch */
html[data-preview] .client{pointer-events:none}
html[data-preview] .client .ch{display:none}