/*
 * brand.css — the Rovara Insights logo, and the tokens that name its colours.
 *
 * Separate from ledgermf.css on purpose. Seven pages do not load ledgermf.css
 * (budget-manager, lease-activity, login, kpi-admin, org-admin,
 * users-admin, index) — several carry their own copy of the palette instead.
 * The logo has to appear on all of them, and linking the full design system into
 * a page that already defines its own tokens would change far more than the
 * logo. This file is additive: it introduces nothing that an existing page rule
 * can collide with.
 *
 * Every image here is generated by scripts/build-brand-assets.js from the one
 * master in assets/brand/ — the approved logo, flat two-tone on a flat ground.
 * The dark variants are exact recolours of it. Do not hand-edit the outputs.
 */

/* The display face. Imported here rather than linked per page because this is
 * the one stylesheet all 22 pages load — ledgermf.css already imports Inter the
 * same way. display=swap so headings paint immediately in the fallback and
 * re-render when Montserrat lands; a heading is never worth a blank screen. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap');

/* ── Brand palette ───────────────────────────────────────────────────────────
 * Sampled from the logo artwork itself, not matched by eye. These are the
 * authority for what the brand colours are; the theme palettes should be
 * expressed in terms of them rather than approximating them.
 */
:root {
  --brand-navy:  #0E2940; /* ROVARA wordmark */
  --brand-sage:  #506D56; /* INSIGHTS, the rule, and the root mark */
  --brand-cream: #FCF8F0; /* the ground the logo was designed on */

  /* ── The display face ──────────────────────────────────────────────────────
   * The logo is not set in a font — it is drawn lettering. Its two R glyphs
   * differ by 2.0% in shape and 2.7% in width, its two A glyphs by 4.2% and
   * 2.3%, and its O is 12% wider than tall where a geometric sans would draw a
   * near-circle. So there is nothing to extract; there is only a closest match.
   *
   * Montserrat is that match. Diffing the logo's glyph masks against 30 faces
   * put it at 8.2% on width — the best of any candidate — with the same pointed
   * A apex and the same wide O. (Lexend scored better on shape alone, but that
   * measure normalises each glyph into a square box and so discards width,
   * which is the most distinctive thing about this lettering.)
   *
   * It is a DISPLAY face here and nothing more. Inter still sets every piece of
   * UI text and JetBrains Mono still sets every figure. The logo's own
   * proportions — 0.16em tracking, geometric forms — are actively wrong for
   * this app at 11-13px: wide tracking slows scanning in dense tables, and
   * geometric sans differentiate I/l/1 poorly, which matters when the screen is
   * full of GL codes.
   */
  --display: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;

  /* ── The label colour on an accent fill ────────────────────────────────────
   * .btn-primary and friends used to hardcode color:#fff on
   * background:var(--accent) — 32 places across 18 files. That only worked
   * because the accent was always dark enough to carry white.
   *
   * It is not any more. A dark theme needs an accent LIGHT enough to read on
   * its own background: the sage is 9.2:1 there, where the old wine was 3.5:1
   * and had to be described as "chrome-only". White on that sage is 2.6:1 —
   * invisible. So the label is a token, dark in the dark theme and white in the
   * light one.
   *
   * The default here is the dark value, matching theme.js's fallback. It lives
   * in brand.css rather than ledgermf.css because eight pages do not load
   * ledgermf.css, and a button with an unreadable label is not something to
   * leave to chance on a third of the app.
   */
  --on-accent: #0B0F12;
}

/* ── Which artwork gets painted ──────────────────────────────────────────────
 * The lockup is two-tone: a navy wordmark over a sage subtitle. A single file
 * recoloured in CSS is not an option — a filter bright enough to lift the navy
 * off a dark background drags the sage up with it and flattens the two into one
 * colour. So there are two files, and exactly one is displayed.
 *
 * The dark-surface artwork is the default because the app's default theme is
 * dark: theme.js falls back to 'dark' when nothing is stored, and seven pages
 * do not load theme.js at all, so no data-theme attribute is ever set on them.
 * Keying off [data-theme="light"] means those pages get the right image by
 * default rather than the wrong one.
 *
 * theme.js sets the attribute synchronously while the head is parsing, before
 * the topbar exists, so the swap never shows as a flash.
 */
.brand-img { display: block; width: auto; height: auto; }
.brand-img--on-light { display: none; }

html[data-theme="light"] .brand-img--on-light { display: block; }
html[data-theme="light"] .brand-img--on-dark  { display: none; }

/* ── Topbar name ─────────────────────────────────────────────────────────────
 * .logo and .nav-brand are the two names the topbar link goes by across the
 * app. Both used to hold the words "Rovara Insights" as text.
 *
 * They carry rovara-name — ROVARA on its own — not the wordmark pair. INSIGHTS
 * is set much smaller than the name in the artwork, so at any height that fits
 * a 52px bar it lands around four pixels tall and reads as a smudge rather than
 * a word. The full lockup appears on the home page and the sign-in screen.
 */
.logo, .nav-brand, .brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo .brand-img,
.nav-brand .brand-img {
  height: 17px;
  /* The artwork is trimmed to the glyphs, so its optical centre sits slightly
     high next to the nav links. */
  margin-top: -1px;
}
.logo:hover .brand-img,
.nav-brand:hover .brand-img { opacity: .82; }
.brand-img { transition: opacity .15s; }

/* ── Full lockup ─────────────────────────────────────────────────────────────
 * Wordmark, rule and root mark together. This is the version with the roots in
 * it, so give it room — it is for the home page and the sign-in screen, not for
 * chrome.
 */
.brand-lockup { display: block; }
.brand-lockup .brand-img {
  width: 100%;
  max-width: 340px;
  height: auto;
}
.brand-lockup--centred {
  display: flex;
  justify-content: center;
}

/* ── Headings ────────────────────────────────────────────────────────────────
 * The display face applies to page- and card-level titles only. Everything
 * smaller — .card-category, .section-title, .page-subtitle, .mcard-label and
 * every table header — stays in Inter, which is drawn for small sizes and for
 * telling I, l and 1 apart.
 *
 * None of these classes declare a font-family of their own, so this rule wins
 * on every page without needing !important. The list covers the several names
 * the app has for the same idea: .page-title and .toolbar-title are both "the
 * heading of this page", depending on which page you are looking at.
 *
 * Montserrat has a smaller x-height than Inter at the same pixel size, so it
 * reads slightly smaller; the sizes are left alone and the tracking is pulled
 * in a touch instead, since Montserrat is loose by default at heading sizes.
 */
.page-title,
.toolbar-title,
.card-title,
.modal-title,
.welcome-heading,
.panel-title,
h1 {
  font-family: var(--display);
  letter-spacing: -0.005em;
}

/* The masthead tagline is set in caps with wide tracking, which is the one
   place the logo's own treatment belongs. */
.masthead-tagline { font-family: var(--display); }

/* ── Root mark on its own ────────────────────────────────────────────────────
 * The rule and roots without the wordmark, used as a quiet divider. Sage reads
 * on both grounds, so it needs no light/dark variant.
 */
.brand-rule {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  opacity: .55;
}

@media print {
  /* Print always lands on white, so force the navy artwork regardless of the
     theme the screen is showing. */
  .brand-img--on-dark  { display: none !important; }
  .brand-img--on-light { display: block !important; }
}