/* People Nexus Technologies — shared design tokens + cross-page fixes.
 *
 * The pages are static HTML with inline styles, so this file is the single
 * source of truth for colour and type: inline styles reference the tokens as
 * `var(--token)` rather than repeating literal hex values.
 *
 * Contrast figures below are WCAG 2.1 AA (4.5:1 for body text, 3:1 for large
 * text) measured against the surfaces each token is actually used on.
 */

:root {
  /* ---- text ------------------------------------------------------------ */
  --ink: #0d1220;             /* headings                       19.8:1 on white */
  --ink-2: #3c4354;           /* strong body                     9.9:1 */
  --ink-3: #5a6172;           /* body                            6.7:1 */
  --muted: #5f6675;           /* secondary                       5.8:1 (was #8a90a0 @ 3.2:1) */
  --muted-2: #697080;         /* tertiary / footer               5.0:1 white, 4.7:1 on --surface-3
                                                                  (was #9aa0af @ 2.5:1) */

  /* ---- surfaces + lines ------------------------------------------------ */
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --surface-3: #f7f8fa;
  --line: #e5e8ee;
  --line-2: #eceef2;
  --line-3: #e9ebf1;

  /* ---- brand ----------------------------------------------------------- */
  --brand: oklch(0.56 0.18 264);
  --brand-ink: oklch(0.5 0.17 264);
  --brand-deep: oklch(0.42 0.16 264);
  --accent: oklch(0.72 0.125 200);
  --ok: oklch(0.5 0.14 158);  /* white text on this = 5.4:1 (was 0.62 L @ 3.4:1) */
  --was: #8d5a55;             /* struck-through "before" value   5.1:1 (was #b98a86 @ 3.0:1) */

  /* ---- type scale ------------------------------------------------------ */
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 17px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 24px;
}

/* ---- nav ---------------------------------------------------------------
 * #nav-links is white-space:nowrap + overflow:hidden, so once it runs out of
 * room it silently cuts the last link in half ("Contac"). Hand over to the
 * hamburger well before that point rather than truncating.
 * Pages define their own `@media (max-width:720px)` rules; these widen the
 * range in which the mobile nav is the one on duty.
 */
@media (max-width: 1080px) {
  #nav-links { display: none !important; }
  .m-nav { display: block !important; }
}

/* ---- header tagline ----------------------------------------------------
 * At narrow widths this is what pushed the header past the viewport and gave
 * every page ~8px of horizontal scroll. It is also the least important text
 * in the header, so it goes first.
 */
@media (max-width: 900px) {
  .hdr-tagline { display: none !important; }
}

/* ---- tap targets -------------------------------------------------------
 * Phone/footer links rendered ~18px tall; 44px is the accepted minimum.
 */
@media (max-width: 720px) {
  .tap-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
    /* flex layout drops the whitespace text node between the number and its
       "· Country" span, so put the gap back explicitly */
    gap: .35em;
  }
}

/* ---- keyboard focus ----------------------------------------------------
 * :where() keeps specificity at 0 so page-level styles still win if they
 * define something more deliberate.
 */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}