/* ============================================================
   Custodia brand identity — single source of truth
   Canonical look: admin header (wordmark, gold period, logo mark).
   Load before domain stylesheets (admin-custom, login-custom, product).
   ============================================================ */

:root {
  /* Wordmark */
  --cu-brand-ink: #f0ead8;
  --cu-brand-gold: #d4a94a;
  --cu-brand-wordmark-font: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cu-brand-wordmark-weight: 500;
  --cu-brand-wordmark-size: 3rem;
  --cu-brand-wordmark-size-tablet: 2.55rem;
  --cu-brand-wordmark-size-mobile: 2.05rem;

  /* Gold period */
  --cu-brand-dot-size: 0.7em;
  --cu-brand-dot-gap: 0.6px;
  --cu-brand-dot-color: var(--cu-brand-gold);

  /* Logo mark */
  --cu-brand-logo-size: 80px;
  --cu-brand-logo-size-tablet: 83px;
  --cu-brand-logo-size-mobile: 76px;
  --cu-brand-logo-gap: 10px;

  /* Compact lockup (product footer, etc.) — same ratios, smaller scale */
  --cu-brand-scale-compact: 0.6875;
  --cu-brand-logo-scale-compact: 0.58;

  /* Custodia brand colours — shared across admin, public portal, and standalone pages */
  --cu-brand-dark: #3b2213;
  --cu-brand-mid: #5a3420;
  --cu-brand-teal: #2A4A52;
  --cu-brand-teal-rgb: 42, 74, 82;
}

/*
  Shared logo mark — one box, preserve aspect ratio.
  Size via --cu-brand-logo-box (defaults to --cu-brand-logo-size).
  Domains only override the box token (breakpoints, modals, etc.).
*/
.org-logo {
  --cu-brand-logo-box: var(--cu-brand-logo-size);
  width: var(--cu-brand-logo-box);
  height: var(--cu-brand-logo-box);
  max-width: var(--cu-brand-logo-box);
  max-height: var(--cu-brand-logo-box);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.org-logo--sm {
  --cu-brand-logo-box: var(--cu-brand-logo-size-mobile);
}

.org-logo--compact {
  --cu-brand-logo-box: calc(var(--cu-brand-logo-size) * var(--cu-brand-logo-scale-compact));
}

/* Shared gold period — admin header, login, product nav/footer */
.site-name__dot,
.nav-logo__dot {
  color: var(--cu-brand-dot-color);
  font-size: var(--cu-brand-dot-size);
  margin-left: var(--cu-brand-dot-gap);
}