/* Webylance reusable brand tokens */
:root,
.brand-webylance {
  --brand-id: "webylance";
  --brand-bg: #F7F6F2;
  --brand-fg: #16160F;
  --brand-accent: #2E8B62;
  --brand-accent-2: #B08B3E;
  --brand-muted: #7C8079;
  --brand-font-heading: Amiri, system-ui, sans-serif;
  --brand-font-body: Amiri, system-ui, sans-serif;

  /* ---------------------------------------------------------------------
   * Derived accessibility ramp.
   *
   * The five kit colours above are the identity. The five below are the
   * same identity resolved into the *roles* an interface needs, each one
   * measured against the surfaces it is actually used on so that every
   * pairing clears WCAG 2.1 AA (4.5:1 for body text).
   *
   *   --brand-accent (#2E8B62) reaches only 4.21:1 against white and
   *   3.72:1 against the page grey, so it is a decorative colour: rules,
   *   borders, icons, large display type. It is never body-text ink and
   *   never a plate behind small white text.
   * ------------------------------------------------------------------ */

  /* Accent as ink on a light surface. 7.34:1 on #FFFDF8, 6.59:1 on #EEF2ED. */
  --brand-accent-ink: #1B6049;

  /* Accent as a plate under light text. 6.41:1 with #FFFFFF, 6.31:1 with --brand-on-accent. */
  --brand-accent-strong: #1F6B4F;

  /* The deep green plate the interface already uses for kickers and chips. */
  --brand-plate: #17624A;

  /* Paper at full value — the only ink allowed on --brand-plate
     (7.17:1) or --brand-accent-strong (6.31:1) or a near-black surface. */
  --brand-on-accent: #FFFDF8;

  /* Accent as ink on a near-black surface, where the darkened ramp above
     would go the wrong way. 7.44:1 on #111612, 7.25:1 on the dark footer. */
  --brand-accent-on-dark: #55B78C;

  /* Muted as ink. --brand-muted itself is 3.55:1 on the page grey and so is
     a border/fill colour only; this is its readable counterpart (5.71:1). */
  --brand-muted-ink: #5A6058;
}

.brand-webylance {
  background: var(--brand-bg);
  color: var(--brand-fg);
  font-family: var(--brand-font-body);
}

.brand-webylance .brand-heading {
  font-family: var(--brand-font-heading);
  font-weight: 850;
  letter-spacing: 0;
}

.brand-webylance .brand-button {
  border: 1px solid color-mix(in srgb, var(--brand-accent) 60%, transparent);
  background: var(--brand-accent);
  color: var(--brand-bg);
}

.brand-webylance .brand-card {
  border: 1px solid color-mix(in srgb, var(--brand-muted) 35%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 55%),
    color-mix(in srgb, var(--brand-bg) 92%, var(--brand-fg) 8%);
}

.brand-webylance .brand-kicker {
  color: var(--brand-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}