/* How the icons from /js/icons.js sit inside the buttons that hold them, and
 * the accent palette those icons paint with.
 *
 * The dominant colour is still never set here: every glyph takes its body from
 * currentColor, so the button's own rule (rail section hue, .rsave.on, hover,
 * either theme) is what tints it. What this file adds is the second and third
 * colour, the bit that makes a house a house and a trophy gold. Those live in
 * custom properties with a value per theme, so a hue can be tuned in one place
 * and no colour is ever buried in the svg markup. */

/* The svg itself. It replaced a text glyph, so it behaves like one: it flows
 * inline and sits on the middle of the line instead of the baseline. Buttons
 * that already centre with grid or flex blockify it and centre it as before. */
.hb-i{display:inline-block;vertical-align:middle;flex:none}

/* Clicks belong to the button, not to the artwork. A couple of handlers in
 * app.js read event.target.dataset, and a path swallowing the click would
 * break them, so the svg never takes a pointer event of its own. */
.hb-i,.hb-i *{pointer-events:none}

/* The holder left in the markup where an emoji used to be. It carries no
 * display of its own, because several of these holders are elements whose
 * own rule in base.css controls whether they are shown at all. */
[data-icon]{font-style:normal;line-height:0}

/* ------------------------------------------------------- the accent palette
   Six accents, two themes. The night rail is a near black gradient and the day
   rail is white, so the same hue cannot serve both. Every value below was
   measured against every background the rail can put behind it, which is the
   bare rail plus each of the nine row hues at its hover and active wash, and
   clears 3:1 on the worst of them. That is the bar for a shape rather than for
   text, and it is what keeps an accent visible instead of a smudge. The day
   gold is darker than it looks like it wants to be for exactly this reason: a
   lighter one washed out on an active row.

   What that measurement does NOT cover is the accent sitting on the icon's own
   body rather than on the rail, and several of them do: the bullseye inside
   the target, the pulse across the heart, the bookmark in the journal, the hub
   in the gear. The body is the row hue at --ic-wash, which is a lighter
   surface than the bare rail, so those pairs come out lower. Measured on the
   heaviest row wash the floor is 2.33:1 at night (the pulse on the heart) and
   2.50:1 by day (the window in the door). They hold because they are areas and
   not lines: that is why an accent on a body gets drawn fat here, and why
   raising --ic-wash to give the bodies more mass was considered and dropped,
   since every point of wash is a point off those pairs.

   Accents are decoration. They never carry meaning on their own, so nothing is
   lost if a player cannot separate two of them.

   --ic-wash is the opacity of the body fill, not a colour. The body is always
   currentColor, so the section hue is what fills every icon and a future
   section recolour reaches the artwork for free. Night needs a little more of
   it than day because a light hue over a dark rail reads fainter. */
:root{
  --ic-wash:.2;
  --ic-sun:#ffcf5c;
  --ic-berry:#ff7a6b;
  --ic-leaf:#5fe39b;
  --ic-sky:#6fc9ff;
  --ic-bark:#d9a46b;
  --ic-eye:#f2f5fa;
}
:root[data-theme="day"]{
  --ic-wash:.16;
  --ic-sun:#8f5a05;
  --ic-berry:#be311e;
  --ic-leaf:#127444;
  --ic-sky:#0c69b0;
  --ic-bark:#845428;
  --ic-eye:#0f1522;
}

/* The classes icons.js paints with. A CSS rule always outranks the presentation
 * attribute on the svg, so fill="none" stroke="currentColor" on the root is the
 * default and any shape carrying one of these overrides it. */
.hb-i .i-w{fill:currentColor;fill-opacity:var(--ic-wash,.2)}
.hb-i .i-f{fill:currentColor}
.hb-i .i-n{stroke:none}

.hb-i .i-sun{fill:var(--ic-sun)}
.hb-i .i-berry{fill:var(--ic-berry)}
.hb-i .i-leaf{fill:var(--ic-leaf)}
.hb-i .i-sky{fill:var(--ic-sky)}
.hb-i .i-bark{fill:var(--ic-bark)}
.hb-i .i-eye{fill:var(--ic-eye)}

.hb-i .i-s-sun{stroke:var(--ic-sun)}
.hb-i .i-s-berry{stroke:var(--ic-berry)}
.hb-i .i-s-leaf{stroke:var(--ic-leaf)}
.hb-i .i-s-bark{stroke:var(--ic-bark)}

/* One surface opts out. The minimised radio puts the music glyph on a solid
 * brand orange disc, and a gold note head on orange is a note head you cannot
 * see. Setting the accents to currentColor there flattens the glyph back to the
 * single colour that disc was designed for, without touching the icon itself. */
.radio-note{
  --ic-sun:currentColor;
  --ic-berry:currentColor;
  --ic-leaf:currentColor;
  --ic-sky:currentColor;
  --ic-bark:currentColor;
  --ic-eye:currentColor;
}