/**
 * Brand tokens — the visual half of `brand.js`.
 *
 * ── This file deliberately changes nothing today ───────────────────────────
 *
 * Every value below is an *alias* of a token that already exists in
 * `design-system/base.css`. The product looks exactly as it did; what changes
 * is that screens now read `--brand-*` instead of reaching for a palette token
 * directly, so the day a real palette arrives there is one file to edit rather
 * than a search across thirty-four pages.
 *
 * The fallbacks after each `var()` are not decoration. This stylesheet can load
 * before the base tokens on a page that includes only part of the system, and a
 * brand colour that resolves to nothing renders as transparent text.
 */

:root {
  /* ── Colour ──────────────────────────────────────────────────────────────
     Aliases only. Replace the right-hand side when the new palette exists. */
  --brand-primary: var(--sf-c-brand, #0f62fe);
  --brand-on-primary: var(--sf-c-on-brand, #ffffff);
  --brand-ink: var(--sf-c-ink, #161616);
  --brand-muted: var(--sf-c-muted, #6f6f6f);
  --brand-surface: var(--sf-c-surface, #ffffff);
  --brand-line: var(--sf-c-line, #e0e0e0);

  /* ── Typography ─────────────────────────────────────────────────────────
     The wordmark's own settings, so it can gain a display face later without
     touching the body type. */
  --brand-wordmark-family: var(--sf-ff-sans, -apple-system, 'Segoe UI', sans-serif);
  --brand-wordmark-weight: var(--sf-fw-semi, 600);
  --brand-wordmark-tracking: -0.01em;

  /* ── The mark ───────────────────────────────────────────────────────────
     A rounded square with the initial in it. Placeholder until a real icon
     exists; sized in `em` so it follows whatever text it sits beside. */
  --brand-mark-size: 1.75em;
  --brand-mark-radius: 6px;
}

/* The text wordmark — what `SF_BRAND.wordmark()` renders. */
.sf-wordmark {
  font-family: var(--brand-wordmark-family);
  font-weight: var(--brand-wordmark-weight);
  letter-spacing: var(--brand-wordmark-tracking);
  color: var(--brand-ink);
  white-space: nowrap;
}

/* The square letter mark — what `SF_BRAND.mark()` renders. */
.sf-brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  border-radius: var(--brand-mark-radius);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-weight: 700;
  /* Slightly smaller than its box so the letter sits optically centred rather
     than filling the square. */
  font-size: 0.72em;
  line-height: 1;
}

/* On a dark ground — the sidebar, the collapsed rail — the wordmark inverts
   and the mark keeps its colour, which is how a lock-up normally behaves. */
.sf-shell-dark .sf-wordmark,
.sf-sidebar .sf-wordmark {
  color: var(--sf-c-inverse-text, #ffffff);
}