/* ============================================================================
   TYPOGRAPHY EXPERIMENT — Fraunces / Inter Tight / JetBrains Mono
   ============================================================================

   TO REVERT: comment out the single <link> to this file in index.html.
   Nothing else in the app references these families, so removing the link
   restores GeneralSans everywhere with no other edits.

   TO ROLL OUT WIDER: add the screen's scope class to the selector list under
   "SCOPE" below, or replace that list with `body` to apply app-wide.

   Fonts are served from /assets/fonts/experiment (variable woff2, latin
   subset) rather than a CDN, so this works with no outbound network access —
   the same approach branding.css already uses for GeneralSans.

   Roles:
     Fraunces        display serif — screen titles, big figures, editorial italic
     Inter Tight     sans — body copy, labels, all UI controls
     JetBrains Mono  mono — tabular / sensitive data: refs, IDs, coordinates
   ========================================================================= */

@font-face {
  font-family: "FrauncesX";
  src: url("/assets/fonts/experiment/fraunces-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FrauncesX";
  src: url("/assets/fonts/experiment/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "InterTightX";
  src: url("/assets/fonts/experiment/inter-tight-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterTightX";
  src: url("/assets/fonts/experiment/inter-tight-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrainsMonoX";
  src: url("/assets/fonts/experiment/jetbrains-mono-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "FrauncesX", Georgia, "Times New Roman", serif;
  --font-ui: "InterTightX", "GeneralSans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrainsMonoX", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- SCOPE ----
   App-wide: page content, the sidebar menu and the top header. Inheritance
   carries it to most elements; form controls are listed because they never
   inherit font-family, and the header/sidebar because branding.css names
   GeneralSans on them directly and would otherwise win by specificity. */

body,
body input,
body select,
body textarea,
body button,
.page-content,
.page-content-wrapper,
.page-container {
  font-family: var(--font-ui);
}

/* Menu */
.page-sidebar,
.page-sidebar a,
.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar .sub-menu > li > a,
#sidebar-mobile,
#sidebar-mobile a,
.sidebar-mobile-container,
.sidebar-mobile-container a {
  font-family: var(--font-ui) !important;
}

/* Header */
.page-header,
.page-header a,
.page-header .top-menu,
.page-header .username,
.page-header .dropdown-menu > li > a {
  font-family: var(--font-ui) !important;
}

/* The portal label reads as a title, so it takes the display serif. */
.page-header .env-text,
.sidebar-mobile-env .env-text {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* The edit bar and combo menus are portalled visually but still inside the
   scoped subtree, so they inherit. Header fields are matched explicitly
   because they carry their own font declarations. */
.tplDetail .tplHeadField input,
.tplDetail .tplComboBtn,
.tplDetail .tplComboItem,
.tplDetail .tplComboSearch {
  font-family: var(--font-ui);
}

/* ---- display serif ---- */

.tplListScreen .chart-title,
.tplDetail .chart-title,
.tplDetail .tplTitle,
.tplListEmptyTitle,
.tplDetail .tplLockedTitle,
.tplDetail .tplTilesEmptyTitle {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* Big figures earn the display face too. */
.tplDetail .tplTilesZero {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* Editorial italic accent for supporting copy. */
.tplDetail .tplLockedText,
.tplListEmptyText {
  font-family: var(--font-display);
  font-style: italic;
  font-optical-sizing: auto;
}

/* ---- monospace: tabular and reference data ----
   Coordinates, page numbers, sizes and zoom readouts are figures the user
   compares against each other, so they get tabular mono. */

.tplDetail .tplTileXY,
.tplDetail .tplTilePage,
.tplDetail .tplTileBox,
.tplDetail .tplTileNum,
.tplDetail .tplEditorSize,
.tplDetail .tplEditorNote,
.tplDetail .tplPagerInput,
.tplDetail .tplZoomLevel,
.tplDetail .tplPager span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Reference-style columns in the list grid. */
.tplListScreen table td .mono,
.tplListScreen .refNo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- section labels ---- */

.tplDetail .tplPaletteTitle {
  font-family: var(--font-ui) !important;
  letter-spacing: 0.07em;
}

.tplDetail .tplTileName {
  font-family: var(--font-ui) !important;
}