/* Subroutine brand adaptation for DevLab v0.7.0. */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f8f7f6;
  --color-surface: #fffdfc;
  --color-fg: #1a1817;
  --color-muted: #5f5855;
  --color-border: #d8d3d1;
  --color-accent: #85141b;
  --color-accent-contrast: #f8f7f6;
  --color-code-bg: #efedec;
  --color-code-fg: #1a1817;
  --color-pre-bg: #1f1c1b;
  --color-pre-fg: #f3efee;
  --color-callout-info-bg: #faf8f5;
  --color-callout-info-border: #a75f25;
  --color-callout-info-fg: #543012;
  --color-callout-warning-bg: #faf9ed;
  --color-callout-warning-border: #858114;
  --color-callout-warning-fg: #2c2b07;
  --color-callout-error-bg: #fbf4f4;
  --color-callout-error-border: #b11b25;
  --color-callout-error-fg: #590d12;
  --color-callout-tip-bg: #f4f8f5;
  --color-callout-tip-border: #4a8255;
  --color-callout-tip-fg: #25412b;
  --shadow-color: 26 24 23;
  --text-display: clamp(2.5rem, 5vw, 3.75rem);
  --site-width: 65rem;
  --header-width: 70rem;
  --wide-width: 70rem;
  --content-width: 48rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #151312;
    --color-surface: #1f1c1b;
    --color-fg: #f3efee;
    --color-muted: #bdb5b2;
    --color-border: #3b3634;
    --color-accent: #eb7a81;
    --color-accent-contrast: #151312;
    --color-code-bg: #292524;
    --color-code-fg: #f3efee;
    --color-pre-bg: #0d0c0b;
    --color-pre-fg: #f3efee;
    --color-callout-info-bg: #26211e;
    --color-callout-info-border: #da9258;
    --color-callout-info-fg: #f6e4d5;
    --color-callout-warning-bg: #25241d;
    --color-callout-warning-border: #e4df4e;
    --color-callout-warning-fg: #f8f7d3;
    --color-callout-error-bg: #271d1d;
    --color-callout-error-border: #e44e58;
    --color-callout-error-fg: #f8d3d5;
    --color-callout-tip-bg: #1e2420;
    --color-callout-tip-border: #7db588;
    --color-callout-tip-fg: #dfece1;
    --shadow-color: 0 0 0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #151312;
  --color-surface: #1f1c1b;
  --color-fg: #f3efee;
  --color-muted: #bdb5b2;
  --color-border: #3b3634;
  --color-accent: #eb7a81;
  --color-accent-contrast: #151312;
  --color-code-bg: #292524;
  --color-code-fg: #f3efee;
  --color-pre-bg: #0d0c0b;
  --color-pre-fg: #f3efee;
  --color-callout-info-bg: #26211e;
  --color-callout-info-border: #da9258;
  --color-callout-info-fg: #f6e4d5;
  --color-callout-warning-bg: #25241d;
  --color-callout-warning-border: #e4df4e;
  --color-callout-warning-fg: #f8f7d3;
  --color-callout-error-bg: #271d1d;
  --color-callout-error-border: #e44e58;
  --color-callout-error-fg: #f8d3d5;
  --color-callout-tip-bg: #1e2420;
  --color-callout-tip-border: #7db588;
  --color-callout-tip-fg: #dfece1;
  --shadow-color: 0 0 0;
}

.site-logo-mark-image {
  border-radius: 0.4rem;
}

.hero-wide {
  background: var(--color-surface);
  box-shadow: none;
}

.hero-wide::before {
  display: none;
}

.hero-media {
  box-shadow: 0 1rem 2.5rem rgb(var(--shadow-color) / 14%);
}

.button {
  border-radius: var(--radius-md);
}