/**
 * MYKA PRO wordmark — live text, not artwork.
 *
 * Replaces the drawn "MYKA" lockup everywhere the mark is read as a WORD:
 * sign-in, the expanded sidebar, the attendance kiosk, About and the
 * first-password screen. The Gate symbol stays artwork everywhere a SYMBOL is
 * required — favicon/PWA, the collapsed sidebar rail and the page preloader —
 * and is untouched by this file.
 *
 * WHY THE BRAND COLOURS LIVE HERE AND NOT IN modern-theme.css
 * The registry rule is that modern-theme.css owns every colour token, and for
 * UI colour it still does. The logotype is the one exception, for a structural
 * reason: views/login/login.php does NOT load modern-theme.css — it is a
 * standalone page with its own token set in style_login.css — so a wordmark
 * that read its colours from the registry would render uncoloured on the one
 * screen where the mark is largest. Registering them there and repeating them
 * as var() fallbacks here is worse, not better: tools/validate_design.php
 * resolves a token to its last definition (the dark one), so every light
 * fallback reads as drift. One definition site, no fallbacks, no drift.
 * These are also NOT UI colours: --erp-primary/--erp-accent drive the
 * interface and change per sibling product, while the logotype is navy and
 * blue in every product and must not follow the accent.
 *
 * FACE: Plus Jakarta Sans 800. Chosen by measurement against the reference
 * logotype (double-storey 'a', geometric 'o', large x-height), from the faces
 * this application already has: Plus Jakarta Sans (self-hosted, 200-800),
 * Open Sans (sign-in only), Poppins (home_mobile only) and the
 * local Inter TTFs. Poppins is out on the letterform — its 'a' is
 * single-storey and the reference's is not. Open Sans is humanist and
 * narrower. Inter ships here as Bold only and cannot reach the reference
 * weight. Plus Jakarta Sans 800 matches on all four counts and costs no new
 * request on a signed-in page.
 *
 * GEOMETRY, measured off the reference and expressed as ratios so every size
 * below is one font-size away:
 *   cap height        0.75em  (Plus Jakarta Sans 800, measured)
 *   x-height / cap    0.729   (reference ~0.76)
 *   "MykaPro" width   5.65 x cap. The face sets 5.825 untracked, hence the
 *                     -0.019em tracking. Tracking, NOT scaling: nothing in
 *                     this file is transformed, stretched or condensed.
 *   (R) cap           0.29 x wordmark cap, top aligned to the cap line
 *   tagline cap       0.139 x wordmark cap, tracked to the wordmark's width
 *   whole lockup      4.456 x font-size wide — the number every call site uses
 *                     to pick a font-size that reproduces the artwork's width
 *
 * The face is imported here, not from styles.css, because neither the sign-in
 * page nor the kiosk loads styles.css - and styles.css no longer carries the
 * font at all. It used to @import it from Google on every page while declaring
 * no rule that used it; that import is gone and this file is now the single
 * place the face enters the application.
 *
 * The imported stylesheet is self-hosted (public/assets/fonts/plus-jakarta-sans/)
 * and covers weights 200-800 from one variable font per unicode subset, so the
 * 700 on .myka-wordmark__reg below is a real 700 and not a synthesised one.
 */
@import url('../fonts/plus-jakarta-sans/plus-jakarta-sans.css');

:root {
  --myka-wordmark-face: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;
  --myka-wordmark-ink: #0B1F44;      /* navy  — "Myka"                */
  --myka-wordmark-accent: #1256F5;   /* blue  — "Pro"                 */
  --myka-wordmark-accent-rgb: 18, 86, 245;  /* channels for rgba() tints */
  --myka-wordmark-muted: #5A6E85;    /* steel — "Business Made Simple" */
}

/* Dark surfaces — the same swap the white artwork made: the navy half becomes
   near-white (navy on the #1E2025 page measures 1.2:1), the blue half lifts to
   stay legible without changing hue. The sign-in page has no dark theme, so it
   simply keeps the values above. */
[data-bs-theme="dark"] {
  --myka-wordmark-ink: #F1F2F4;
  --myka-wordmark-accent: #5B8CFF;
  --myka-wordmark-accent-rgb: 91, 140, 255;
  --myka-wordmark-muted: #9BA0AA;
}

/* ---------------------------------------------------------------
   Wordmark — "MykaPro(R)" on one line.
   Size it by giving .myka-wordmark, or an enclosing .myka-lockup,
   a font-size; every measurement below scales from that.
   --------------------------------------------------------------- */
.myka-wordmark {
  display: inline-block;
  font-family: var(--myka-wordmark-face);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.019em;
  color: var(--myka-wordmark-ink);
  white-space: nowrap;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  /* An inline-block sits on the parent line box BASELINE, which reserves the
     parent's line-height descender underneath it. Aligning to the line box top
     drops that reserved strip, so the element occupies exactly its font-size.
     The mark is never set beside other inline text, so nothing else moves. */
  vertical-align: top;
}

/* The sidebar carries the mark inside an <a>; keep the link colour out. */
a.myka-wordmark:hover,
a.myka-wordmark:focus {
  color: var(--myka-wordmark-ink);
  text-decoration: none;
}

.myka-wordmark__pro {
  color: var(--myka-wordmark-accent);
}

/* Registered mark. vertical-align takes a length in THIS span's own em, so
   1.59em here is 0.48 wordmark-em: the distance from the (R)'s baseline up to
   the wordmark's cap line once the glyph's own height is accounted for. */
.myka-wordmark__reg {
  font-size: 0.30em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 1.59em;
  margin-left: 0.04em;
}

/* ---------------------------------------------------------------
   Full lockup — wordmark over the tagline. Used where the mark has
   the room to carry its line: sign-in, About, first-password.
   --------------------------------------------------------------- */
.myka-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.myka-lockup .myka-wordmark {
  font-size: 1em;
}

/* Product word - TRENDS / CONNECT / FRESH / TEAM. Restored from the old
   myka_pro_trends_lockup.svg, which had it drawn as vector letterforms in the
   accent; that is exactly why a sibling product needed its OWN artwork file.
   As text the word comes from mykaProduct() and the colour from CSS, so a
   sibling repo still changes only MYKA_PRO_PRODUCT.

   Proportions are the shipped artwork's, measured off its viewBox: cap 38 at
   MYKA cap 94 = 0.404 of the wordmark cap, tracked so the word spans ~87% of
   the wordmark, baseline gap 0.383 cap.

   The colour is named twice on purpose. Inside the app --erp-brand-accent
   resolves from <html data-myka-product>; the sign-in page never loads
   modern-theme.css but emits --accent itself from mykaAccent(). No hex here:
   the accent belongs to the product, not to the logotype. */
.myka-lockup__product {
  font-family: var(--myka-wordmark-face);
  font-size: 0.404em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.88em;
  margin-right: -0.88em;
  margin-top: 0.26em;
  color: #2f79d6;
  text-transform: uppercase;
  white-space: nowrap;
}

/* With a product line between them the tagline no longer has to clear the
   wordmark's 'y' descender, so it sits on a tighter gap of its own. */
.myka-lockup__product + .myka-lockup__tagline {
  margin-top: 1.30em;
}

.myka-lockup__tagline {
  font-family: var(--myka-wordmark-face);
  font-size: 0.139em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.94em;
  /* Tracking is applied after the last letter too. Pull it back so the
     tagline's right edge lands on the wordmark's, not one space past it. */
  margin-right: -0.94em;
  margin-top: 0.80em;
  color: var(--myka-wordmark-muted);
  text-transform: uppercase;
  white-space: nowrap;
}