:root {

  --core-unit: 1rem;
  --space-ratio: 1/2;
  --space-unit: calc(var(--core-unit) * var(--space-ratio ));
  --size-ratio: 1/2;
  --size-unit: calc(var(--core-unit) * var(--size-ratio));

  --top-bar-height: calc(var(--space-unit) * 6);

  --doc-aside-width: calc(var(--space-unit) * 38);
  --doc-aside-padding: calc(var(--space-unit) * 3);

  --page-padding-x: calc(var(--space-unit) * 3);


  --lightness: 92%;
  --darkness: 10%;

  --accent-lightness: 50%;

  /* --lightest: 250 5% 100%; */
  --lightest: 250 5% var(--lightness);
  --lightest-comma: 250, 5%, var(--lightness);
  --darkest: 230 20% var(--darkness);

  --darkester: 250 12% calc(var(--darkness) - 4%);
  --darkester-comma: 250, 12%, calc(var(--darkness) - 4%);

  --darkest-comma: 250, 12%, var(--darkness);

  --over-accent-color-hsl: var(--lightest);

  --accent-color-hsl: var(--lightest);
  --accent-color-hsl-adjusted: ;
  --accent-color: hsl(var(--accent-color-hsl));

  /* Brand colors — defaults from /__src/img/*-logo.svg */
  --brand-color-reflectx: 130 100% 50%;
  --brand-hsl-reflectx: 130, 100%, 50%;
  --brand-color-routerx: 348 100% 50%;
  --brand-hsl-routerx: 348, 100%, 50%;
  --brand-color-restate: 220 100% 50%;
  --brand-hsl-restate: 220, 100%, 50%;
  --brand-color-re-md: 260 100% 50%;
  --brand-hsl-re-md: 260, 100%, 50%;
  --brand-color-doc-quick: 25 100% 50%;
  --brand-hsl-doc-quick: 25, 100%, 50%;
  --brand-color-native: 0 0% 100%;
  --brand-hsl-native: 0, 0%, 100%;
  --brand-color-auto-define: var(--fcolor-hsl);
  --brand-hsl-auto-define: var(--fcolor-hsl-comma);
  --brand-color-make-ready: var(--fcolor-hsl);
  --brand-hsl-make-ready: var(--fcolor-hsl-comma);
  --brand-color-monitor-loading: var(--fcolor-hsl);
  --brand-hsl-monitor-loading: var(--fcolor-hsl-comma);
  --brand-color-ready-element: var(--fcolor-hsl);
  --brand-hsl-ready-element: var(--fcolor-hsl-comma);
  --brand-color-wait-for-elements-ready: var(--fcolor-hsl);
  --brand-hsl-wait-for-elements-ready: var(--fcolor-hsl-comma);
  --brand-color-svg-insert: var(--fcolor-hsl);
  --brand-hsl-svg-insert: var(--fcolor-hsl-comma);

  --code-block-font-size: var(--f-size-p);

  --line-numbers-opacity: 0.2;
  --inline-code-bg-opacity: 0.1;
  --inline-code-border-opacity: 0.4;
  --aside-border-opacity: 0.4;
  --aside-bg-opacity: 0.06;
  --code-block-bg-opacity: 0.06;
  --code-block-border-opacity: 0.5;
  --code-block-focus-opacity: 0.2;
  --blockquote-bg-opacity: 0.07;
  --blockquote-border-opacity: 0.8;
  --hr-border-opacity: 0.5;
  --link-icon: "#";
  --link-icon-copied: "# copied!";
  --link-icon-opacity: 0.4;
  --table-border-opacity: 0.1;
  --table-thead-bg-opacity: 0.8;
  --table-thead-color-opacity: 0.9;
  --table-th-color-opacity: 1;
  --table-th-border-opacity: 1;
  --table-tr-border-opacity: 0.5;
  --table-tr-even-bg-opacity: 0.06;
  --table-td-color-opacity: 0.85;
  --table-td-border-opacity: 0.5;
  --table-td-even-bg-opacity: 0.04;

  --page-transition-time: 0.8s;
  --show-duration-delay: ;
}
/* Default (light) */
:root {

  --fcolor-hsl: var(--lightest);
  --fcolor-hsl-comma: var(--lightest-comma);
  --bcolor-hsl: var(--darkest);

}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
  :root:not([theme-mode="light"]) {
    --fcolor-hsl: var(--darkest);
    --fcolor-hsl-comma: var(--darkest-comma);
    --bcolor-hsl: var(--lightest);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([theme-mode="dark"]) {
    --fcolor-hsl: var(--lightest);
    --fcolor-hsl-comma: var(--lightest-comma);
    --bcolor-hsl: var(--darkest);
  }
}

/* User override - dark */
:root[theme-mode="dark"] {
  --fcolor-hsl: var(--lightest);
  --fcolor-hsl-comma: var(--lightest-comma);
  --bcolor-hsl: var(--darkest);
}

/* User override - light */
:root[theme-mode="light"] {
  --fcolor-hsl: var(--darkest);
  --fcolor-hsl-comma: var(--darkest-comma);
  --bcolor-hsl: var(--lightest);
  --accent-color-hsl: var(--darkest);
}

html, body {
  background-color: hsl(var(--bcolor-hsl));
}

body {
  overflow-x: hidden;
  color: hsl(var(--fcolor-hsl));
}

body :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ff-1);
}
.--accent-is-light {
  --over-accent-color-hsl: var(--darkest);
}
:is(
  [theme-mode="light"].--accent-is-light,
  [theme-mode="light"] .--accent-is-light
) {
  --accent-color-hsl: var(--accent-color-hsl-adjusted) !important;
  --accent-color: hsl(var(--accent-color-hsl-adjusted)) !important;
  --over-accent-color-hsl: var(--darkest);
}
:is(
  [theme-mode="dark"].--accent-is-dark,
  [theme-mode="dark"] .--accent-is-dark
) {
  --accent-color-hsl: var(--accent-color-hsl-adjusted) !important;
  /* --over-accent-color-hsl: var(--darkest); */
}

html p {
  font-family: var(--ff-2);
  font-size: var(--f-size-p);
  line-height: 1.4;
  color: hsla(var(--fcolor-hsl) / 0.8);
}

html h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-1);
  line-height: 1.25;
}

html a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: hsla(var(--fcolor-hsl) / 0.8);
  color: hsla(var(--fcolor-hsl) / 0.8);
}

/* Reveal animation — opt-in per element with the `reveal` attribute.
--show-duration-delay is set at runtime by monitor-loading
from their `show-duration` attribute. Defaults to 0ms (no delay) when no loader is used. */

:is(top-bar, base-hero, base-quote, base-back-to, base-button, page-container, flex-container, base-footer, base-profile-card, base-card, doc-quick, doc-body, doc-aside)[reveal]:not([ready]) {
  contain-intrinsic-size: 300px;
  opacity: 0;
  transform: translateY(16px);
  transition-property: opacity, transform;
  transition-duration: var(--page-transition-time);
  transition-delay: var(--show-duration-delay, 0ms);
  transition-timing-function: ease-in;
}

:is(top-bar, base-hero, base-quote, base-back-to, base-button, base-profile-card, base-card, page-container, flex-container, base-footer, doc-quick, doc-body, doc-aside)[reveal][ready] {
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: var(--page-transition-time);
  transition-delay: var(--show-duration-delay, 0ms);
  transition-timing-function: ease-out;
}

/* Explicit starting values for browsers that support @starting-style (Chrome 117+, Safari 17.5+, Firefox 129+).
   Ensures the transition fires even when [ready] is set before the first paint. */
@starting-style {
  :is(top-bar, base-hero, base-quote, base-back-to, base-button, base-profile-card, base-card, page-container, flex-container, base-footer, doc-quick, doc-body, doc-aside)[reveal][ready] {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media screen and (max-width: 768px) {
  :root {
    --page-padding-x: calc(var(--space-unit) * 2);
  }
}

@media screen and (max-width: 480px) {
  :root {
    --page-padding-x: calc(var(--space-unit) * 1);
  }
}