@import url('/brand/tokens.css');

/* R1 institutional identity only. Do not use this layer to redesign product layout. */
body > .topbar .brand,
.uebey-product__brand,
.ueber-brand {
  color: var(--uebey-brand-ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}

body > .topbar .brand::before,
.uebey-product__brand::before,
.ueber-brand::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: url('/brand/symbol.svg') center/contain no-repeat;
}

body .uebey-product {
  --uebey-ui-bg: var(--uebey-brand-cloud);
  --uebey-ui-surface: var(--uebey-brand-white);
  --uebey-ui-text: var(--uebey-brand-ink);
  --uebey-ui-line: var(--uebey-brand-mist);
  --uebey-ui-accent: var(--uebey-brand-green);
  --uebey-ui-accent-hover: #0D4038;
  --uebey-ui-accent-pressed: #0A332D;
  --uebey-ui-focus-color: var(--uebey-brand-purple);
  --uebey-ui-focus: 0 0 0 3px rgba(87, 76, 149, .20);
}

.ueber-brand { text-decoration: none; }

/* Existing Sites shells keep their layout and consume the canonical symbol through the legacy favicon path. */
.brand > img[src$="favicon.svg"] { object-fit: contain; }
.brand > span { text-transform: uppercase; }