/* =====================================================================
   Brax Wink — sub-brand token layer
   Drop-in for the Brax Technologies design system.
   Place at: sub_brands/wink.css
   Load AFTER colors_and_type.css (add the @import in styles.css).

   Wink inherits the parent system whole — Kinetika SemiBold for display
   and labels, LFT Etica Mono for body, the 4-pt scale, square buttons,
   hairline borders, the dark surface ramp, the semantic status colors.
   ONE variable changes: the accent is lime #C6FF00, never orange.

   Wink is a DARK-SURFACE sub-brand. Light usage is limited to the
   wordmark and accent type, which drop to --wink-lime-deep.
   ===================================================================== */

:root {
  /* ─── Wink accent ─────────────────────────────────────────────────
     Positional replacement for --brand-orange and its ramp. */
  --wink-lime: #C6FF00;        /* Primary fill, active state, live dot, focus, accent type */
  --wink-lime-hover: #B2E600;  /* 8% darken — matches the parent's hover step */
  --wink-lime-press: #9AC700;  /* Press. Darken only, no transform on top */
  --wink-lime-tint: rgba(198, 255, 0, 0.12);  /* Selected row, active tab, accent pill bg */
  --wink-lime-deep: #536B00;   /* The one light-surface derivation. 5.6:1 on #FAF9F7 */

  /* Lime is a bright color. Text and glyphs ON a lime fill are brand ink,
     never white — this is the one behavioural difference from orange. */
  --wink-ink-on-lime: #171717;

  /* Focus ring — same geometry as the parent, lime hue. */
  --shadow-glow-lime: 0 0 0 4px rgba(198, 255, 0, 0.22);

  /* NOTE: Wink has NO gradient. The parent's aurora does not get a green
     twin — there is deliberately no --wink-aurora token. */
}

/* ─── Theme scope ───────────────────────────────────────────────────
   Wrap any Wink surface (page, section, OS screen) in .wink and the
   inherited components re-point their accent at lime automatically. */
.wink {
  --brand-orange: var(--wink-lime);
  --brand-orange-hover: var(--wink-lime-hover);
  --brand-orange-press: var(--wink-lime-press);
  --brand-orange-tint: var(--wink-lime-tint);
  --shadow-glow-orange: var(--shadow-glow-lime);
}

/* Any filled-accent surface inside .wink carries ink, not white. */
.wink .btn-primary,
.wink .chip-accent,
.wink [data-accent-fill] {
  color: var(--wink-ink-on-lime);
}

/* Accent type — eyebrows, ALL-CAPS labels, one word in a headline. */
.wink .eyebrow { color: var(--wink-lime); }
.wink .accent  { color: var(--wink-lime); }

/* Light surfaces inside a Wink context drop to lime-deep. */
.wink .on-light .eyebrow,
.wink .on-light .accent { color: var(--wink-lime-deep); }

/* ─── Wordmark ──────────────────────────────────────────────────────
   Set in Kinetika SemiBold, sentence case, tracked -0.02em.
   "Brax" takes the surface text color, "Wink" takes the accent.
   Clear space = cap height of the wordmark on all four sides.
   Markup: <span class="wink-wordmark">Brax <em>Wink</em></span> */
.wink-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #FFFFFF;
}
.wink-wordmark em {
  font-style: normal;
  color: var(--wink-lime);
}
.wink-wordmark.on-light { color: var(--brand-ink); }
.wink-wordmark.on-light em { color: var(--wink-lime-deep); }