/* One type system for jewishinsandiego.org.
 *
 * Outfit is the only face: public pages, My Giving, the Back Office, and the
 * staff dashboard. --font-display and --font-body are the same stack so a
 * page cannot drift by picking the "body" token. Mosaic keeps Lexend on
 * --mz-font. This file does not restyle that sub-brand.
 *
 * Back Office (body[data-staff-only], including Grants and Ask Hala) uses
 * the same face at lighter weights. Those sizes are at the bottom of this
 * file.
 * Sizes are rem so the readable ramp in readable.css still moves them together.
 *
 * The overnight a11y pass (PR #929, ca607ce3, and the 16px follow-ups
 * #939–#960) set form text to 1rem/16px with a broad brush. Choice
 * descriptions inherited .modal label's uppercase, letter-spacing, and
 * weight, so a 12px sentence became a 16px tracked heading. 1rem/16px
 * stays on typed controls only (that is what stops iOS from zooming).
 * Labels, radio and checkbox copy, helpers, chips, headings, and tables
 * stay on the steps below. A 44px target is min-height or padding, never
 * a bigger font.
 *
 * Mosaic keeps Lexend on its content zone (--mz-font). This file does not
 * restyle that sub-brand.
 */

:root{
  --text-subtle:#64748B; /* Terms and Privacy fine print on a light surface. --muted stays #A0AEC0. */
  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:var(--font-display);
  --f:var(--font-display);
  --body:var(--font-display);
  --font:var(--font-display);
  --f-ui:var(--font-display);
  --f-disp:var(--font-display);
  --fs-body:1rem;            /* 16px. Paragraphs. */
  --fs-small:.875rem;        /* 14px. Secondary copy. */
  --fs-label:.8125rem;       /* 13px. Field labels. Not uppercase unless the component asks. */
  --fs-helper:.75rem;        /* 12px. Descriptions, meta, hints. Sentence case. */
  --fs-option:.875rem;       /* 14px. Radio and checkbox choice titles. Sentence case. */
  --fs-button:.9375rem;      /* 15px. */
  --fs-table:.875rem;        /* 14px. */
  --fs-chip:.7188rem;        /* 11.5px. Pills and badges. Do not raise these to body size. */
  --fs-h1:clamp(1.75rem,4.5vw,3rem);      /* 28–48px. Hero h1 is still heroes.css. */
  --fs-h2:clamp(1.5rem,3vw,2.125rem);     /* 24–34px. */
  --fs-h3:1.25rem;           /* 20px. */
  --fs-h4:1.0625rem;         /* 17px. */
  --fs-control:1rem;         /* Typed controls. 16px at the phone root. */
  --fw-title:700;            /* Public page titles. Back Office overrides below. */
  --fw-heading:700;          /* Public section and card headings. */
  --fw-ui:600;               /* Public buttons, nav, links. */
  --fw-body:400;
  --fw-label:700;            /* Public field labels, table heads, small caps. */
  --fw-number:700;           /* Public dollar totals. */
  --fw-kicker:800;           /* Public step eyebrows. Back Office uses 500. */
  --lh-body:1.6;
  --lh-tight:1.25;
  --ls-label:.04em;
  --ls-none:0;
}

/* Defaults only. :where() is zero specificity, so a page rule still wins. */
:where(body){
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-none);
}
:where(h1,h2,h3,h4){
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:var(--lh-tight);
  text-transform:none;
}
:where(h1){font-size:var(--fs-h1)}
:where(h2){font-size:var(--fs-h2)}
:where(h3){font-size:var(--fs-h3)}
:where(h4){font-size:var(--fs-h4);font-weight:600}
:where(p){font-size:var(--fs-body);line-height:var(--lh-body)}
:where(small,.type-small){font-size:var(--fs-small);font-weight:400;letter-spacing:0;text-transform:none}
:where(button,.btn){
  font-family:var(--font-display);
  font-size:var(--fs-button);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
:where(table){font-family:var(--font-body);font-size:var(--fs-table)}
:where(th){
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
:where(td){font-size:var(--fs-table)}
:where(.badge,.pill,.tag,.chip){
  font-family:var(--font-display);
  font-size:var(--fs-chip);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Typed controls. Attribute :not() outranks a class on the same element,
   so a later .field input{font-size:13px} cannot drop the value under 16px.
   Checkboxes, radios, file pickers, and button inputs are not in this list. */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
select,
textarea{
  font-family:var(--font-display);
  font-size:var(--fs-control);
}

/* A choice is not a field label. .modal label is uppercase and tracked;
   that treatment must not leak into the option or its description. */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]){
  font-family:var(--font-body);
  font-size:var(--fs-option);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.35;
}
label:has(> input[type="radio"]) b,
label:has(> input[type="checkbox"]) b{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
label:has(> input[type="radio"]) .type-helper,
label:has(> input[type="checkbox"]) .type-helper,
.type-helper{
  font-family:var(--font-body);
  font-size:var(--fs-helper);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  line-height:1.45;
}

/* Back Office. One face, lighter weights.
   Public pages and Mosaic do not carry data-staff-only, so the rules above
   still apply there. These selectors are more specific than the class rules
   in admin.html and grants.css, which load later. !important is only where
   a page uses an id (Home, Ask Hala) and would otherwise keep 700. */
body[data-staff-only]{
  --font-body:'Outfit',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --f-ui:'Outfit',system-ui,sans-serif;
  --f:var(--font-display);
  --fs-body:.9375rem;       /* 15px at a 16px root */
  --fs-small:.875rem;       /* 14px. Help and meta. */
  --fs-helper:.8125rem;     /* 13px. Help lines. */
  --fs-label:.75rem;        /* 12px. Small-caps labels. */
  --fs-option:.875rem;
  --fw-title:600;
  --fw-heading:600;
  --fw-ui:500;
  --fw-body:400;
  --fw-label:500;
  --fw-number:600;
  --fw-kicker:500;
  font-family:var(--font-display);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  letter-spacing:0;
}
body[data-staff-only] :is(h1,h2,h3,h4,.top .b,.vendor-pick label,.vendor-label){
  font-family:var(--font-display);
  font-weight:var(--fw-heading) !important;
}
body[data-staff-only] :is(.vendor-pick label,.vendor-label){
  font-size:1.0625rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body[data-staff-only] :is(button,.btn,.nav-home,.navsec button,.side nav a,.side .nav-home,.toast){
  font-family:var(--font-display);
  font-weight:var(--fw-ui) !important;
}
body[data-staff-only] :is(p,li,td,.uof,.wiki-bubble,.wiki-answer,.txt,.qclear):not(.wiki-greet){
  font-family:var(--font-display);
  font-size:var(--fs-body) !important;
  font-weight:var(--fw-body) !important;
}
body[data-staff-only] .wiki-greet{
  font-family:var(--font-display);
  font-size:1.5rem !important;
  font-weight:var(--fw-heading) !important;
  letter-spacing:-.02em;
}
body[data-staff-only] :is(
  .vendor-help,.vendor-selected,.vendor-note,.vendor-empty,.vendor-legal,
  .type-helper,.fld .help,.help,.finance-sent,.finance-block,.wiki-hint
){
  font-family:var(--font-display);
  font-size:var(--fs-helper) !important;
  font-weight:var(--fw-body) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body[data-staff-only] :is(th,.step,.kpi .l,.m .l,.hbox .l,.home-section-label,.agroup,.ghead .org,.bo-caption,.wcard .wl,.col h4){
  font-family:var(--font-display);
  font-size:var(--fs-label) !important;
  font-weight:var(--fw-label) !important;
}
body[data-staff-only] :is(.kpi .v,.hbox .n,.m .v,.wcard .wv,.amt,td.amt,.home-lane-n,.gcard .ga,.num){
  font-family:var(--font-display);
  font-weight:var(--fw-number) !important;
}
body[data-staff-only] :is(b,strong){
  font-weight:var(--fw-heading) !important;
}
body[data-staff-only] .vendor-list button{
  font-size:var(--fs-body) !important;
  font-weight:var(--fw-ui) !important;
}
body[data-staff-only] :is(input,select,textarea):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.bo-copy){
  font-family:var(--font-display);
  font-size:var(--fs-control) !important;
}