:root {
  --oi-ink: #152220;
  --oi-ink-soft: #3d4c47;
  --oi-deep-teal: #075f58;
  --oi-brand-teal: #0d8379;
  --oi-live-teal: #0d9488;
  --oi-mint: #e4f1ef;
  --oi-mist: #f1f6f4;
  --oi-cloud: #fbfdfc;
  --oi-steppe-blue: #467d89;
  --oi-sun: #d99a06;
  --oi-danger: #c2453a;
  --oi-line: #e2eae7;
  --oi-radius-sm: 10px;
  --oi-radius-md: 16px;
  --oi-radius-lg: 22px;
  --oi-shadow-soft: 0 14px 40px rgba(7, 95, 88, 0.1);
}

.brand-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--oi-deep-teal);
  fill: none;
  flex: 0 0 auto;
  vertical-align: middle;
}

.brand-icon-tile {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.875rem;
  color: var(--oi-deep-teal);
  background: var(--oi-mint);
}

.brand-icon-tile[data-tone="blue"] {
  color: #315e68;
  background: #e8f0f2;
}

.brand-icon-tile[data-tone="gold"] {
  color: #765403;
  background: #fbf3e2;
}

.brand-surface {
  background-color: var(--oi-mist);
  background-image: url("/assets/brand-v2/patterns/kerege.svg");
}