/*
 * Typography — one font, one scale, everywhere
 * =============================================
 * Loaded LAST on every page (public site and dashboards), so it is the final word on
 * type. Only type: family, size, weight, line height, letter spacing. No spacing,
 * colour or layout.
 *
 * What was measured before this file
 * ----------------------------------
 *   Public site  three families on one page — DM Sans for text, Fraunces (a serif)
 *                for headings, and the system font for the app shell — and 29
 *                different font sizes, from 10px to 40.8px.
 *   Dashboard    the system font, 19 different sizes (10, 11, 11.52, 12, 12.48, 12.5,
 *                12.8, 13, 13.12, 13.6, 14, 15.2, 16, 16.8, 17.6, 21.6, 22.4, 24,
 *                25.6px), weights 400/500/600/700/800, and two monospace stacks.
 *
 * Most of those odd sizes are not choices, they are rem arithmetic (0.8rem = 12.8px,
 * 0.78rem = 12.48px) scattered across many files, so the same kind of text — a page
 * title, a sidebar item, a button — came out a different size on each screen.
 *
 * The system
 * ----------
 *   Family   DM Sans, the brand font the public site already used, on every page,
 *            with the device's own font as the fallback while it loads or offline.
 *            Monospace only for codes and reference numbers, from one stack.
 *   Sizes    11 · 12 · 13 · 14 · 16 · 20 · 24 · 28 · 40px
 *              11  column headings, badges, captions, tab-bar labels
 *              12  table cells, form labels, secondary text
 *              13  buttons, inputs, sidebar items, body text in the dashboard
 *              14  body text on the public site, emphasised values
 *              16  card titles, the top bar title
 *              20  page titles, headline figures
 *              24 / 28 / 40  public section titles and the hero, by screen size
 *   Weights  400 text · 600 buttons, labels, emphasis · 700 titles and headings
 *
 * Sizes are applied to the named components that were measured off the scale, with
 * !important because each is otherwise set by a more specific rule in some other file.
 * Icons and emoji (sidebar icons, tab-bar icons, avatars) are glyphs, not text, and
 * are deliberately left alone.
 */

:root {
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-hero: 40px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- 1. family */

/* One family for all text. Form controls do not inherit fonts by default, which is
   one of the places the system font kept showing through. */
body *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--font-sans) !important;
}

/* Codes and reference numbers stay monospaced — one stack, not two. */
code, pre, kbd, samp,
[style*="monospace"],
.member-req-ref,
.amd-detail-hero__codes code,
.members-hub-ref,
.deposit-payment-summary__ref code,
.app-track-ref__value,
.master-type-form__preview-code,
.unit-master-page__code,
.member-withdrawals-account-card__no,
.member-statements-fd-card__acct,
.member-statements-ref,
.dm__id,
.depmem__id,
.apim__path,
.apim__method,
.apim__code pre,
.dbimp__path,
.dbimp__mono,
.dbimp__confirminput {
  font-family: var(--font-mono) !important;
}

/* A monospaced code in a table cell reads as the same size as the text beside it. */
td[style*="monospace"] {
  font-size: var(--text-xs) !important;
}

/* ------------------------------------------------------- 2. headings & titles */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
}

/* Dashboard page titles: 19.2px, 21.6px and 22.4px on three screens before. */
.newly-page__title,
.members-hub-page__title,
.deposit-requests-page__title,
.dash-layout h2[class$="page__title"],
.dash-layout h2[class*="page__title "] {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
}

.topbar-title,
.card-title,
.roleswitch__title,
.sysset__cardtitle {
  font-size: var(--text-md) !important;
  font-weight: 700 !important;
}

/* Public site: the serif is gone, the hierarchy is kept by size and weight. */
.hero-title-dark,
.hero-title-accent {
  font-size: var(--text-hero) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
}

.public-site h2,
#app > :not(.dash-layout) h2,
body:not(:has(.dash-layout)) h2 {
  font-size: var(--text-2xl) !important;
}

.hero-brand-mark {
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
}

body:not(:has(.dash-layout)) h3 {
  font-size: var(--text-md) !important;
}

/* ------------------------------------------------------- 3. text on the scale */

/* 11px — headings of columns, captions, small labels, tab-bar labels. */
.nav-section,
.mapp-tab__label,
.deposit-requests-kpi__label,
.role-nav-kpi__label,
.role-nav-kpi__member-amount,
.members-hub-member-cell__meta,
.member-recent-ref-sub,
.dash-date-cell__time,
.depcat__label,
.depcat__members-go,
.members-hub-member-cell__avatar,
.ui-action-tooltip {
  font-size: var(--text-2xs) !important;
}

/* 12px — secondary text, notes, amounts under a label. */
.depcat__amount,
.roleswitch__note,
.whyg__count,
.dash-contact-cell__email,
.dash-contact-cell__phone,
.profile-photo-hint,
.btn-sm,
.btn.btn-sm {
  font-size: var(--text-xs) !important;
}

/* 13px — navigation, buttons, controls, dashboard body text. */
.nav-item,
.nav-item__label,
.mapp-offline,
.mapp-install__text,
.mapp-install__go,
.mapp-install__no,
.depcat__name,
.roleswitch__btn,
.footer-brand-tagline,
.members-hub-page__subtitle,
.deposit-requests-page__subtitle,
.newly-page__sub {
  font-size: var(--text-sm) !important;
}

/* 14px — body copy on the public site. */
.home-section-lead,
.footer-contact-line {
  font-size: var(--text-base) !important;
}

/* 16px — small headline figures. */
.stat-value,
.depcat__count {
  font-size: var(--text-md) !important;
  font-weight: 700 !important;
}

/* 20px — headline figures on dashboards (17.6px and 21.6px/800 before). */
.deposit-requests-kpi__value,
.role-nav-kpi__val,
.role-nav-kpi__val--stat {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
}

/* Public-site text set by its parent rather than its own class, measured off-scale
   (10.5, 12.48, 12.5, 13.5, 14.5, 14.72, 15, 16.8, 19.2px). */
.hero-trust-row > li,
.depcat__members > span {
  font-size: var(--text-2xs) !important;
}

.whyg__cap > span,
.footer-brand-text > p,
html body .footer-col .footer-brand-text p.footer-brand-tagline,
.footer-link-list a,
.footer-contact-line a,
.home-contact-cta__lead p {
  font-size: var(--text-sm) !important;
}

.home-why-list > li > span,
.whyg__cap > strong,
.mapp-install__text b {
  font-size: var(--text-base) !important;
}

.footer-brand-name > strong {
  font-size: var(--text-md) !important;
}

.home-trust-stat strong {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
}

/* 500 was a fourth weight used in a few places only; 600 is the system's middle. */
.stat-label,
.ui-action-tooltip,
.dash-contact-cell__phone,
.dash-date-cell__date {
  font-weight: 600 !important;
}

/* ---------------------------------------------------------- 4. controls */

/* Buttons were 11, 12 and 13px at 500 or 600 depending on the screen. */
.btn,
button.btn,
label.btn,
a.btn,
.sysset__btn {
  font-size: var(--text-sm);
  font-weight: 600 !important;
  letter-spacing: normal;
}

.btn.btn-sm,
.btn-sm {
  font-weight: 600 !important;
}

label,
.form-group label,
.sysset__label {
  font-weight: 600;
}

input,
select,
textarea,
.form-control,
.form-select,
.sysset__input {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
}

/* Tables: headings 11/700, cells 12/400 — the members table's values. */
table th {
  font-size: var(--text-2xs);
  font-weight: 700;
}

table td {
  font-size: var(--text-xs);
}

/* 800 was used for a few figures only; 700 is the heaviest weight in the system. */
[style*="font-weight:800"],
[style*="font-weight: 800"] {
  font-weight: 700 !important;
}

/* ------------------------------------------------------------ 5. phones */

@media (max-width: 768px) {
  .hero-title-dark,
  .hero-title-accent {
    font-size: var(--text-xl) !important;
  }

  body:not(:has(.dash-layout)) h2 {
    font-size: var(--text-xl) !important;
  }

  /*
   * 16px in text fields on phones. iOS Safari zooms the whole page in when a field
   * smaller than 16px is focused, and does not zoom back out — so a 13px field made
   * every form jump sideways the moment someone tapped it.
   */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .sysset__input {
    font-size: var(--text-md) !important;
  }
}