/* css/typography.css - BEC system typography */

/* Self-hosted. This file used to @import Inter from Google Fonts — an external
   dependency hidden inside a stylesheet rather than a visible <link>, so with no
   internet every screen it touches fell back to Arial. It also overrode the
   institution's own typefaces with a generic UI stack via !important, which is
   why the sign-in screens rendered in plain sans instead of the serif used on
   the landing page. */
@import url('../assets/vendor/fonts/fonts.css');

:root {
  /* Brand faces, matching the landing page and the technician workspace:
     Fraunces (serif) for headline moments, DM Sans for interface text. */
  --font-primary: 'DM Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Section and card titles stay on the interface face: a serif at 0.9rem in a
     dense admin table reads cluttered, not premium. */
  --font-heading: 'DM Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  /* Only ever reached by something that asks for it explicitly. Roboto Mono
     used to sit at the front of this stack and was never vendored, so it named
     a face the app does not ship — see the ID rule near the bottom of the file
     for what that cost. Everything here is either built into the OS or the
     generic, so there is nothing left to fall through. */
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  --type-app-title: clamp(1.25rem, 2vw, 1.65rem);
  --type-page-title: clamp(1.15rem, 1.7vw, 1.45rem);
  --type-section-title: .98rem;
  --type-card-title: .92rem;
  --type-label: .75rem;
  --type-input: .88rem;
  --type-button: .82rem;
  --type-table-head: .72rem;
  --type-table-body: .82rem;
  --type-status: .68rem;
  --type-notification: .82rem;
  --type-nav: .82rem;
  --type-bottom-nav: .7rem;
  --type-modal-title: 1.08rem;
  --type-modal-body: .88rem;
  --type-footer: .74rem;

  --line-tight: 1.2;
  --line-title: 1.28;
  --line-body: 1.55;
  --line-control: 1.35;
}

html {
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-primary) !important;
}

body {
  font-size: .875rem;
  line-height: var(--line-body);
  letter-spacing: 0;
}

.app-title,
.brand-title,
.logo-text,
.sb-brand strong,
.brand-name {
  font-family: var(--font-display) !important;
  font-size: var(--type-app-title);
  line-height: var(--line-title);
  font-weight: 800;
  letter-spacing: 0;
}

.page-title,
.pg-title,
.top-title,
.hero-title,
.ph h1,
h1 {
  font-family: var(--font-display) !important;
  font-size: var(--type-page-title);
  line-height: var(--line-title);
  font-weight: 800;
  letter-spacing: 0;
}

.section-title,
.section-h h2,
.panel-head h3,
.panel-h h3,
.ph3 h3,
h2,
h3 {
  font-family: var(--font-heading) !important;
  font-size: var(--type-section-title);
  line-height: var(--line-title);
  font-weight: 700;
  letter-spacing: 0;
}

.card-title,
.tb-title,
.ap-head h3,
.ec-name,
.uc-name,
.report-detail-title,
.modal-card-title {
  font-family: var(--font-heading) !important;
  font-size: var(--type-card-title);
  line-height: var(--line-title);
  font-weight: 700;
  letter-spacing: 0;
}

label,
.f-label,
.fl,
.form-label,
.field-label,
.ro-label,
.det-k,
.dk {
  font-size: var(--type-label);
  line-height: var(--line-control);
  font-weight: 700;
  letter-spacing: .02em;
}

input,
select,
textarea,
.f-ctrl,
.fi,
.fsel,
.fc,
.search-in {
  font-size: var(--type-input);
  line-height: var(--line-control);
  font-weight: 500;
  letter-spacing: 0;
}

button,
.btn,
.btn-submit,
.btn-cancel,
.nav-item,
.ni,
.lout {
  font-size: var(--type-button);
  line-height: var(--line-control);
  font-weight: 700;
  letter-spacing: 0;
}

th,
.table-header,
.th,
.khead {
  font-size: var(--type-table-head);
  line-height: var(--line-control);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

td,
.table-content,
.table-cell,
.report-row,
.dr,
.d-row {
  font-size: var(--type-table-body);
  line-height: var(--line-body);
  font-weight: 500;
  letter-spacing: 0;
}

.badge,
.status,
.status-badge,
.pill,
.chip,
.ticket-label,
.st {
  font-size: var(--type-status);
  line-height: var(--line-control);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.toast,
.toast-notification,
.notification,
.notif,
.alert,
.fi-hint,
.section-sub,
.hero-sub {
  font-size: var(--type-notification);
  line-height: var(--line-body);
  font-weight: 500;
  letter-spacing: 0;
}

.sidebar a,
.sidebar button,
.nav-menu,
.nav-link,
.nav-item,
.ni {
  font-size: var(--type-nav);
  line-height: var(--line-control);
  font-weight: 600;
}

.bottom-nav,
.bottom-nav a,
.bottom-nav button {
  font-size: var(--type-bottom-nav);
  line-height: var(--line-control);
  font-weight: 700;
}

.modal-title,
.m-head-txt h2,
.mhd-t h2,
.cbox h3,
.loading-title {
  font-family: var(--font-display) !important;
  font-size: var(--type-modal-title);
  line-height: var(--line-title);
  font-weight: 800;
  letter-spacing: 0;
}

.modal,
.modal-content,
.m-body,
.cbox p,
.loading-sub {
  font-size: var(--type-modal-body);
  line-height: var(--line-body);
  font-weight: 500;
}

footer,
.footer,
.page-footer,
.copyright {
  font-size: var(--type-footer);
  line-height: var(--line-body);
  font-weight: 500;
  letter-spacing: 0;
}

/* Ticket numbers, work-order and asset ids. These were forced onto --font-mono
   with !important, and the front of that stack was 'Roboto Mono' — a family the
   app has never vendored. So the declaration reached nothing and every id fell
   through to whatever mono the machine happened to own: Consolas on Windows,
   SF Mono on a Mac, DejaVu elsewhere. The !important also beat every page that
   had already chosen a face for its own ids, which is how BEC-2026-000097 came
   out as Consolas on three admin pages that ask for Outfit, and how the student
   dashboard's 1.4rem Fraunces ticket number rendered as a mono string.

   Outfit is the default here because it is vendored and it is what the admin
   pages already declare. No !important: a page that has decided otherwise —
   student_dashboard.php wants the serif for its one big ticket number — now
   keeps its decision. Lining, evenly-spaced figures are what a column of ids
   actually needs from a monospace, and tabular-nums gets that from any of them. */
.rid,
.woid,
.eid,
.ticket-num,
.report-id,
.asset-tag {
  font-family: 'Outfit', var(--font-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  :root {
    --type-page-title: 1.18rem;
    --type-section-title: .94rem;
    --type-card-title: .88rem;
    --type-input: 1rem;        /* 16px: prevents iOS Safari zoom-on-focus */
    --type-button: .8rem;
    --type-table-body: .78rem;
    --type-modal-title: 1rem;
  }
  /* Safety net: any form control under 16px zooms on iOS; force 16px on phones. */
  input, select, textarea,
  .fi, .fsel, .fc, .f-ctrl, .search-in, .input, .ci {
    font-size: 16px;
  }
}