/*
 * Copyright (c) 2026 Let's Automate Ltd. All rights reserved.
 * Proprietary and confidential.
 */

/*
 * Icon system for the marketing site.
 *
 * Artwork: Tabler Icons v3.44.0 (MIT). Icons ship as inline SVG at the use site,
 * never as an external sprite: WebKit does not support <use> against an external
 * document, so a sprite renders as nothing on iOS. See docs/design/ICON-SET.md.
 *
 * Size, stroke and colour live here and ONLY here. Never set them inline on the
 * <svg>, or a page will quietly drift out of the system.
 */

.lgg-icon {
  /* Match the icon to whatever text it sits beside, so it scales with the type
     scale instead of needing a size class at every call site. */
  width: 1em;
  height: 1em;

  /* Tabler is drawn on a 24px grid at 2px stroke. Scaling that down to 1em and
     keeping the stroke absolute would thicken the icon as the type gets smaller,
     so we let it scale and then correct: 1.75 reads as the optical match for
     Rajdhani's stems at body sizes. */
  stroke-width: 1.75;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Optical alignment. Icons sit slightly high against a cap-height baseline,
     so nudge down rather than using vertical-align: middle, which over-corrects
     on multi-line labels. */
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/*
 * Size steps. Only reach for these when the icon is NOT beside text and so has
 * no font-size to inherit from.
 */
.lgg-icon--sm {
  width: 1rem;
  height: 1rem;
}
.lgg-icon--md {
  width: 1.5rem;
  height: 1.5rem;
}
.lgg-icon--lg {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.5; /* thinner as it grows, or it reads as heavy */
}
.lgg-icon--xl {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.25;
}

/*
 * An icon in a feature card sat in a tinted well, replacing the old emoji blob.
 * The well is what gives the thin Tabler line enough presence to hold a card;
 * the icon alone would look like a stray hairline.
 *
 * The well is BRASS, and it is brass unconditionally.
 *
 * It used to be `rgba(var(--game-color-rgb, 255, 0, 255), 0.12)` with a
 * `var(--game-color, #ff00ff)` glyph, which was wrong twice. The fallback was
 * #ff00ff, the magenta of the dead palette, primed to reappear the first time a
 * new page used a well and forgot to declare the variable. And where pages DID
 * declare it, most of them set neon pink, so a company-values card, a support
 * card and a 404 got glowing pink icon badges. Neon marks the games and nothing
 * else, and an icon on a feature card is not a game: it is print furniture, so it
 * is made of the same brass as the rules, the labels and the shelf tags. Half the
 * pages had already worked this out and were hand-patching --game-color to
 * #e0a458 to get here. Now nobody has to.
 */
.lgg-icon-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: rgba(224, 164, 88, 0.12);
  border: 1px solid rgba(224, 164, 88, 0.28);
  color: var(--brass, #e0a458);
}

/* On card stock, brass on cream is 1.79:1 and the glyph all but vanishes, so a
   well on paper is printed, not lit: ink on a faint ink tint. */
.paper .lgg-icon-well {
  background: rgba(43, 33, 37, 0.06);
  border-color: rgba(43, 33, 37, 0.2);
  color: var(--ink-soft, #5d5250);
}

.lgg-icon-well .lgg-icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.75;
  vertical-align: 0;
}

/*
 * Inline icon beside a label. The gap is deliberately tighter than a word space:
 * the icon is part of the label, not a separate item next to it.
 */
.lgg-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/*
 * Status colours. Never colour alone: these always sit beside a text label, per
 * the project colour rule on colour-blind safety.
 *
 * The tick is BRASS, not green. It used to be var(--neon-green), a token from
 * the old palette that no longer exists, so it fell through to a hardcoded
 * #00ff88 and put a bright acid green on the pricing chalkboard. That breaks the
 * one rule the whole system rests on: neon marks the GAMES and nothing else. A
 * tick on a price list is not a game, so it gets the brass the rest of the
 * furniture is made of.
 */
.lgg-icon--yes {
  color: var(--brass, #e0a458);
}
.lgg-icon--no {
  color: rgba(255, 255, 255, 0.45);
}