/* TOIRO brand primitives: thin gold double-ring identity. */

:root {
  --toiro-brand-gold: #d8b25a;
  --toiro-brand-paper: #ffffff;
}

.toiro-brand-mark {
  width: var(--toiro-brand-mark-size, 32px);
  height: var(--toiro-brand-mark-size, 32px);
  color: var(--toiro-brand-mark-color, var(--toiro-brand-gold));
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.toiro-brand-mark circle {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--toiro-brand-mark-stroke, 1.08);
}

.toiro-brand-mark--thin {
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-brand-mark--ui {
  --toiro-brand-mark-size: 24px;
}

.toiro-brand-mark--display,
.toiro-brand-mark--display-xs,
.toiro-brand-mark--display-sm,
.toiro-brand-mark--display-md,
.toiro-brand-mark--display-lg,
.toiro-brand-mark--display-xl {
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-brand-mark--display {
  --toiro-brand-mark-size: 80px;
}

.toiro-brand-mark--display-xs {
  --toiro-brand-mark-size: 48px;
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-brand-mark--display-sm {
  --toiro-brand-mark-size: 64px;
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-brand-mark--display-md {
  --toiro-brand-mark-size: 80px;
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-brand-mark--display-lg {
  --toiro-brand-mark-size: 112px;
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-brand-mark--display-xl {
  --toiro-brand-mark-size: 144px;
  --toiro-brand-mark-stroke: 1.08;
}

.toiro-app-icon {
  width: var(--toiro-app-icon-size, 96px);
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  background: var(--toiro-app-icon-background, var(--toiro-brand-paper));
  color: var(--toiro-app-icon-color, var(--toiro-brand-gold));
  overflow: hidden;
}

.toiro-app-icon--ios {
  border-radius: 22.222%;
}

.toiro-app-icon--android {
  border-radius: 50%;
}

.toiro-app-icon--browser {
  background: transparent;
}

.toiro-app-icon > .toiro-brand-mark {
  --toiro-brand-mark-size: 76%;
  color: inherit;
}