/* ============================================================
   Grow brand layer
   ------------------------------------------------------------
   One file, loaded before every other stylesheet, holding the
   Grow identity: the palette measured off the supplied artwork
   and the logo lockup used in navs, headers and footers.

   The whole design problem in one number
   --------------------------------------
   The brand lime (#BCDA82) measures 1.56:1 against white. Body
   text needs 4.5:1 and large text 3:1, so the brand colour
   CANNOT be used for text on a light background -- not as a
   link, not as a heading, not as a caption. Using it there is
   the single most likely way to "use the branding more" and end
   up with a site people can't read.

   Two things follow, and they shape everything below:

     1. On LIGHT surfaces the lime is a FILL, never ink. It
        appears as chips, rules, bars, and washes with dark text
        sitting on top. Where a green *text* colour is genuinely
        needed we step down the same hue ramp to --lime-700
        (6.36:1) rather than tinting the brand colour.

     2. On DARK surfaces the relationship inverts: the lime
        measures 12.02:1 on the story pages' near-black. There
        it is a first-class ink, and that is where the identity
        gets to be loud.

   The ramp holds hue 80.5 deg and boosts saturation as value
   drops, so every step still reads as the same green rather
   than sliding toward olive or teal.

   Every pairing asserted here is enforced by
   scripts/verify_brand.py, which fails the build on a
   contrast regression. Comments claiming a ratio would rot;
   a test does not.
   ============================================================ */

:root {
  /* ---- measured directly off the supplied artwork ---- */
  --grow-lime:      #BCDA82;  /* 21.4% of the logo's opaque pixels' partner */
  --grow-lime-2:    #ABC76E;  /* the smaller lower leaf */
  --grow-charcoal:  #444950;  /* the wordmark */

  /* ---- hue-preserving ramp (h=80.5deg) ---- */
  --lime-50:   #E8F7CB;
  --lime-100:  #D5EDA6;
  --lime-200:  #BADB79;   /* ~= the brand lime */
  --lime-300:  #A0C754;
  --lime-400:  #89B239;
  --lime-500:  #709922;
  --lime-600:  #5A8012;   /* 4.63:1 on white -- smallest AA-safe body ink */
  --lime-700:  #486908;   /* 6.36:1 on white -- comfortable green ink */
  --lime-800:  #375204;
  --lime-900:  #293D02;

  /* ---- charcoal ramp, for surfaces that want the logo's grey ---- */
  --char-700:  #363A40;
  --char-800:  #2B2F34;
  --char-900:  #1F2226;

  /* Leaf colour consumed by grow-logo.svg via fill="var(--grow-leaf, ...)".
     Set per-context where the default would disappear. */
  --grow-leaf: var(--grow-lime);
}

/* ============================================================
   Logo lockup
   ------------------------------------------------------------
   The SVG's wordmark is fill="currentColor", so the lockup
   inherits whatever colour its container sets. That is what lets
   one asset serve the light dashboard and the dark story pages
   without a second file to keep in sync.
   ============================================================ */

.grow-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* The artwork is 800x493 with the leaves occupying the upper right,
     so optical centring wants a hair of extra height allowance. */
  line-height: 0;
}

.grow-logo svg,
.grow-logo img {
  display: block;
  height: 1.5em;
  width: auto;
}

/* Sizes. Set on the wrapper so the em-based svg height follows. */
.grow-logo--sm { font-size: 11px; }
.grow-logo--md { font-size: 15px; }
.grow-logo--lg { font-size: 22px; }
.grow-logo--xl { font-size: 34px; }

/* A lockup that pairs the mark with the product name. The mark carries the
   brand; the wordmark beside it carries the specific piece of work. */
.grow-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.grow-lockup__divider {
  width: 1px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.22;
  flex: none;
  /* Inset so the rule reads as a separator rather than a full-height bar. */
  margin: 0.15em 0;
}

.grow-lockup__name {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  opacity: 0.9;
}

/* ============================================================
   Light-surface brand elements
   ------------------------------------------------------------
   Lime as FILL with dark ink on top. #444950 on #BCDA82
   measures 5.83:1, comfortably AA for body text -- the brand's
   own two colours happen to be a legible pair, which is the
   detail worth building on.
   ============================================================ */

.grow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--grow-lime);
  color: var(--char-900);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.grow-chip--soft {
  background: var(--lime-50);
  color: var(--lime-900);
}

/* A short lime rule, used to open sections. Decorative only: it carries no
   information, so its contrast is unconstrained. */
.grow-rule {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--grow-lime);
  border: 0;
  margin: 0 0 18px;
}

/* Growth marks: the two leaves, reused as a section ornament. */
.grow-leafmark {
  color: var(--lime-500);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .grow-logo svg { transition: color .2s ease; }
}