@import "../assets/brand/brand.css";
@import "../assets/brand/fonts.css";

:root, :root[data-brand-mode] {
  --md-text-font: Lexend;
  --md-code-font: Hack;
  --md-default-bg-color: var(--cwtch-canvas);
  --md-default-fg-color: var(--cwtch-ink);
  --md-default-fg-color--light: var(--cwtch-ink);
  --md-primary-fg-color: var(--cwtch-green);
  --md-primary-fg-color--dark: var(--cwtch-green-hover);
  --md-primary-bg-color: var(--cwtch-on-primary);
  --md-accent-fg-color: var(--cwtch-blue);
  --md-typeset-a-color: var(--cwtch-blue);
  --md-code-bg-color: var(--cwtch-surface);
  --md-code-fg-color: var(--cwtch-ink);
}
body { font-family: var(--cwtch-font-body); font-synthesis: none; }
.md-header, .md-tabs { color: var(--cwtch-on-primary); }
.md-header__button.md-logo { background: var(--cwtch-surface); border-radius: 4px; }
.md-header__button.md-logo img { width: 32px; height: 32px; }
.brand-logo { display: block; width: 240px; max-width: 100%; }
.brand-logo img { display: block; width: 100%; height: auto; }
.brand-logo-muted { display: none; }
[data-brand-mode="muted"] .brand-logo-vivid { display: none; }
[data-brand-mode="muted"] .brand-logo-muted { display: block; }
.brand-lockup { display: inline-block; padding: 16px; background: var(--cwtch-surface); }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--md-default-fg-color);
  font-family: var(--cwtch-font-heading);
  font-weight: var(--cwtch-weight-heading);
  letter-spacing: var(--cwtch-tracking-heading);
}

.md-typeset h1 {
  font-size: var(--cwtch-font-size-main-heading);
}

.md-typeset h2 {
  font-size: var(--cwtch-font-size-section-heading);
}

.md-typeset h3 {
  font-size: var(--cwtch-font-size-small-heading);
}

.md-typeset h1:lang(cy),
.md-typeset h2:lang(cy),
.md-typeset h3:lang(cy) {
  font-family: var(--cwtch-font-body);
  font-weight: var(--cwtch-weight-emphasis);
}

.md-typeset {
  max-width: 75ch;
  font-family: var(--cwtch-font-body);
  font-size: var(--cwtch-font-size-body);
  line-height: var(--cwtch-line-height-body);
  letter-spacing: var(--cwtch-tracking-body);
}

.md-typeset p {
  margin-block-end: var(--cwtch-paragraph-gap);
}

.md-typeset code,
.md-typeset pre {
  font-family: var(--cwtch-font-code);
  font-size: var(--cwtch-font-size-code);
}

:focus-visible,
.brand-intensity button:focus-visible {
  outline: 3px solid var(--md-accent-fg-color);
  outline-offset: 3px;
}

.brand-intensity {
  display: flex;
  align-items: center;
  gap: var(--cwtch-space-base);
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--cwtch-space-base) var(--cwtch-space-small);
  color: var(--md-default-fg-color);
}

.brand-intensity [role="radiogroup"] {
  display: flex;
  align-items: center;
  gap: var(--cwtch-space-fine);
}

.brand-intensity button {
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: var(--cwtch-space-fine) var(--cwtch-space-base);
}

.brand-intensity [aria-checked="true"] {
  border-radius: var(--cwtch-radius-small);
  background: var(--md-primary-fg-color);
  color: var(--cwtch-on-primary);
  padding: var(--cwtch-space-fine) var(--cwtch-space-base);
}

.md-typeset .admonition.caution,
.md-typeset details.caution {
  border-color: var(--cwtch-gold);
}

@media (max-width: 40rem) {
  .brand-intensity {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}