/* Subroutine's site-owned adaptation of DevLab v0.7.0.
 * Brand identity is not a category palette. Keep surfaces quiet and use
 * supporting hues only for explicit context, action, or status.
 */
:root {
  --brand-brick: #b0413e;
  --brand-charcoal: #2e282a;
  --brand-cream: #faf0ca;
  --brand-teal: #548687;
  --brand-tangerine: #ee964b;
  --brand-gold: #f4d35e;
  --brand-sage: #7d9463;
  --brand-oxblood: #a4031f;
  --brand-aubergine: #240b36;

  --text-display: clamp(2.5rem, 5vw, 3.75rem);
  --site-width: 65rem;
  --header-width: 70rem;
  --wide-width: 70rem;
  --content-width: 48rem;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f8f8f7;
  --color-surface: #fcfcfb;
  --color-fg: var(--brand-charcoal);
  --color-muted: #514e4f;
  --color-border: #d5d2cf;
  --color-accent: var(--brand-brick);
  --color-accent-contrast: #fffffc;
  --color-primary-fill: var(--brand-brick);
  --color-primary-hover: #993835;
  --color-primary-active: #812f2d;
  --color-on-primary-fill: #fffffc;
  --color-selection-bg: #f0d5d2;
  --color-selection-fg: var(--brand-charcoal);
  --color-code-bg: #efefed;
  --color-code-fg: var(--brand-charcoal);
  --color-pre-bg: #efefed;
  --color-pre-fg: var(--brand-charcoal);
  --color-callout-info-bg: #e7eeee;
  --color-callout-info-border: #3f6566;
  --color-callout-info-fg: var(--brand-charcoal);
  --color-callout-warning-bg: #f7eadc;
  --color-callout-warning-border: #925b2d;
  --color-callout-warning-fg: var(--brand-charcoal);
  --color-callout-error-bg: #f6e6e9;
  --color-callout-error-border: var(--brand-oxblood);
  --color-callout-error-fg: var(--brand-charcoal);
  --color-callout-tip-bg: #ebefe6;
  --color-callout-tip-border: #536342;
  --color-callout-tip-fg: var(--brand-charcoal);
  --shadow-color: 46 40 42;
}

/* Only unresolved/system roots follow this fallback. Explicit light must win
 * even on a dark OS, including before the deferred theme script executes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #1c1b1c;
    --color-surface: #242324;
    --color-fg: #dedcda;
    --color-muted: #bbb8b7;
    --color-border: #514b49;
    --color-accent: #d68a85;
    --color-accent-contrast: var(--brand-charcoal);
    --color-primary-fill: #c0524e;
    --color-primary-hover: #b84945;
    --color-primary-active: var(--brand-brick);
    --color-on-primary-fill: #fffffc;
    --color-selection-bg: #543737;
    --color-selection-fg: #dedcda;
    --color-code-bg: #2d2b2c;
    --color-code-fg: #dedcda;
    --color-pre-bg: #161516;
    --color-pre-fg: #dedcda;
    --color-callout-info-bg: #293536;
    --color-callout-info-border: #88abac;
    --color-callout-info-fg: #dedcda;
    --color-callout-warning-bg: #3a3027;
    --color-callout-warning-border: var(--brand-tangerine);
    --color-callout-warning-fg: #dedcda;
    --color-callout-error-bg: #3b2b30;
    --color-callout-error-border: #d98493;
    --color-callout-error-fg: #dedcda;
    --color-callout-tip-bg: #2f362b;
    --color-callout-tip-border: #98ab83;
    --color-callout-tip-fg: #dedcda;
    --shadow-color: 18 17 18;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1c1b1c;
  --color-surface: #242324;
  --color-fg: #dedcda;
  --color-muted: #bbb8b7;
  --color-border: #514b49;
  --color-accent: #d68a85;
  --color-accent-contrast: var(--brand-charcoal);
  --color-primary-fill: #c0524e;
  --color-primary-hover: #b84945;
  --color-primary-active: var(--brand-brick);
  --color-on-primary-fill: #fffffc;
  --color-selection-bg: #543737;
  --color-selection-fg: #dedcda;
  --color-code-bg: #2d2b2c;
  --color-code-fg: #dedcda;
  --color-pre-bg: #161516;
  --color-pre-fg: #dedcda;
  --color-callout-info-bg: #293536;
  --color-callout-info-border: #88abac;
  --color-callout-info-fg: #dedcda;
  --color-callout-warning-bg: #3a3027;
  --color-callout-warning-border: var(--brand-tangerine);
  --color-callout-warning-fg: #dedcda;
  --color-callout-error-bg: #3b2b30;
  --color-callout-error-border: #d98493;
  --color-callout-error-fg: #dedcda;
  --color-callout-tip-bg: #2f362b;
  --color-callout-tip-border: #98ab83;
  --color-callout-tip-fg: #dedcda;
  --shadow-color: 18 17 18;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

/* Use the supplied outlined lockup, not a favicon beside retyped lettering.
 * Keep its artboard padding and let explicit appearance override the OS. */
.site-logo {
  min-height: 3rem;
}

.site-logotype {
  display: block;
  width: clamp(8.5rem, 22vw, 12rem);
  height: auto;
}

.site-logotype-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-logotype-light { display: none; }
  :root:not([data-theme="light"]) .site-logotype-dark { display: block; }
}

:root[data-theme="dark"] .site-logotype-light { display: none; }
:root[data-theme="dark"] .site-logotype-dark { display: block; }

@media (max-width: 480px) {
  .site-header-inner { gap: 0.5rem; }
  body:not(.site-menu-is-ready) .site-nav {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

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

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

.hero-eyebrow {
  color: var(--color-muted);
}

/* The hero is brand artwork, not an application window or screenshot. */
.hero-media {
  padding-block-start: 0;
  box-shadow: none;
}

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

.hero-media img {
  border-block-start: 0;
}

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

/* Readable link accents and solid controls need different pairs in dark mode.
 * Keep the boundary at the resting fill when hover/press darkens the interior. */
.button-primary,
.skip-link {
  background: var(--color-primary-fill);
  color: var(--color-on-primary-fill);
  border-color: var(--color-primary-fill);
}

@media (hover: hover) {
  .button-primary:not([disabled]):not([aria-disabled="true"]):hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary-fill);
  }
}

.button-primary:not([disabled]):not([aria-disabled="true"]):active {
  background: var(--color-primary-active);
  color: var(--color-on-primary-fill);
}

.button-primary[disabled],
.button-primary[aria-disabled="true"],
.button-primary[aria-disabled="true"]:hover {
  background: var(--color-surface-strong);
  color: var(--color-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* Callout outlines communicate their role; prose and inline code remain readable.
 * The theme otherwise puts code directly on its saturated border color. */
.content .callout :not(pre) > code {
  background: var(--color-code-bg);
  color: var(--color-code-fg);
}

.content .code-block-language::before {
  background: var(--color-muted);
  box-shadow: none;
}

.content .code-copy-button[data-copy-state="success"] {
  background: var(--color-callout-tip-bg);
  border-color: var(--color-callout-tip-border);
  color: var(--color-callout-tip-fg);
}

.content .code-copy-button[data-copy-state="error"] {
  background: var(--color-callout-error-bg);
  border-color: var(--color-callout-error-border);
  color: var(--color-callout-error-fg);
}