/* ===========================================================================
   Brand tokens — the single source for identity across every surface.

   Sampled from the approved logo and the current business card, not invented:

     #63AA56   the logo green. The palm-frond mark and the wordmark are drawn
               in it. Contrast against white is 2.83:1, so it is a MARK colour —
               fine for the logo, large display type and decorative rules, and
               never for body text, links or a button fill.

     #07730E   the field green from the business card, where the logo sits
               reversed out in white. 6.06:1 against white, so this is what
               carries text: primary buttons, links, active navigation.

     #013D06   the deepest accent, from the card's rule. 12.56:1 — hover and
               pressed states, and dark surfaces.

   The status colours are deliberately NOT the brand. Green-as-brand and
   green-as-compliant would collide on the one screen where the distinction
   matters most, so status green is pulled cooler and darker than the mark.
   =========================================================================== */

:root {
  --brand:         #63AA56;   /* mark only — fails text contrast by design */
  --brand-dark:    #07730E;   /* text, links, primary buttons */
  --brand-darker:  #013D06;   /* hover, pressed, dark surfaces */
  --brand-ink:     #fff;      /* text on a brand-green fill — see the dark block */
  --fill-ink:      #fff;      /* text on any saturated status fill — danger, warning */
  --brand-tint:    #EAF4E8;   /* pale wash for selected rows and soft buttons */
  --brand-tint-2:  #D5E9D1;   /* one step up, for borders on tinted areas */

  /* The diagonal-field motif from the business card and the letterhead. */
  --brand-field: linear-gradient(135deg, #07730E 0%, #0A8512 55%, #013D06 100%);
}

[data-bs-theme="dark"] {
  /* On a dark ground the deep field green goes muddy, so the mark green leads
     and the deep green becomes the shadow under it. */
  --brand:         #7BC46E;
  --brand-dark:    #63AA56;
  /* Hover lightens here rather than darkens. On a dark ground the deep green is
     already close to the page and going further down reads as disabled, not
     pressed — and it drops the label on a filled button below the contrast bar. */
  --brand-darker:  #6FB562;

  /* The fill greens are light in this theme, so white text on them lands at
     2.83:1 — unreadable. Filled buttons take dark ink instead, which is the
     usual direction for a dark palette: light accent, dark label. 5.82:1 at
     rest, 6.64:1 on hover. */
  --brand-ink:     #0B2410;

  /* --bad and --warn lighten in this theme for the same reason the greens do,
     so anything filled with them needs dark ink too — white on the danger fill
     is 2.42:1. One token for both: they are the same problem. */
  --fill-ink:      #2B0806;
  --brand-tint:    #16281A;
  --brand-tint-2:  #1F3823;

  --brand-field: linear-gradient(135deg, #0A5410 0%, #07730E 55%, #013D06 100%);
}

/* --- the logo --------------------------------------------------------------
   Three lockups. Which one to use is a function of available width, not taste:
   below roughly 150px the wordmark stops being legible and only the mark
   should appear. */

.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: auto; width: auto; }

.logo-h img { height: 34px; }        /* horizontal lockup, default chrome */
.logo-v img { height: 96px; }        /* vertical lockup, sign-in and banners */
.logo-mark img { height: 30px; }     /* mark alone, tight spaces */

.logo-lg.logo-h img { height: 46px; }
.logo-lg.logo-v img { height: 132px; }

/* The white lockups are for the brand field and any dark surface. Swapped by
   presence of the .on-brand class rather than by media query, because the
   surface decides, not the theme. */
.logo .on-light { display: block; }
.logo .on-dark  { display: none; }
.on-brand .logo .on-light,
[data-bs-theme="dark"] .logo .on-light { display: none; }
.on-brand .logo .on-dark,
[data-bs-theme="dark"] .logo .on-dark { display: block; }

/* --- brand field -----------------------------------------------------------
   The diagonal green panel the printed identity uses. Carries white text and
   the reversed logo. */

.brand-field {
  background: var(--brand-field);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.brand-field a { color: #fff; }

/* A very quiet echo of the frond, large and clipped — the way the business
   card uses the mark as a watermark rather than a repeated pattern. */
.brand-field::after {
  content: "";
  position: absolute;
  inset-inline-end: -6%;
  bottom: -38%;
  width: 46%;
  min-width: 240px;
  aspect-ratio: 654 / 466;
  background: url("/static/brand/mark-white.png") no-repeat center / contain;
  opacity: .10;
  pointer-events: none;
}
@media (max-width: 640px) {
  .brand-field::after { width: 62%; bottom: -30%; opacity: .08; }
}