/*
 * Local Pico theme overrides.
 *
 * Keep this file focused on variables we intentionally change. Use
 * docs/vars.css and docs/colors.css as references, not as runtime CSS.
 */

:root {
  --theme-font-family-display: "Playfair", Georgia, "Times New Roman", serif;
  --theme-font-family-serif:
    "Source Serif 4", Georgia, "Times New Roman", serif;
  --theme-font-size-serif: 1.02em;
  --theme-font-size-mono: 0.9em;
  --pico-font-family-sans-serif:
    "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    Helvetica, Arial, "Helvetica Neue", sans-serif,
    var(--pico-font-family-emoji);
  --pico-font-family-monospace:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace, var(--pico-font-family-emoji);
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-code-kbd-background-color: var(--pico-color);
  --pico-code-kbd-color: var(--pico-background-color);
  --pico-blockquote-border-color: var(--pico-muted-border-color);
  --pico-blockquote-footer-color: var(--pico-muted-color);
  --pico-table-border-color: var(--pico-muted-border-color);
  --pico-card-border-color: var(--pico-muted-border-color);
  --pico-dropdown-color: var(--pico-color);
  --pico-progress-color: var(--pico-primary-background);
}

a[href]:not([role="button"]):is(:hover, :focus-visible),
a[href].secondary:not([role="button"]):is(:hover, :focus-visible) {
  color: var(--brand-color-primary);
  text-decoration-color: var(--brand-color-primary);
}

code,
kbd,
pre,
samp {
  font-size: var(--theme-font-size-mono);
}

h1 {
  --pico-font-size: 4rem;
  --pico-font-weight: 800;
  font-family: var(--theme-font-family-display);
}

h2 {
  --pico-font-size: 2rem;
  --pico-typography-spacing-top: calc(var(--pico-spacing) * 4);
  margin-top: calc(var(--pico-spacing) * 5);
  margin-bottom: calc(var(--pico-spacing) * 2);
  font-family: var(--theme-font-family-serif);
  font-weight: 600;
  text-align: center;
}

h3 {
  --pico-font-size: 1.35rem;
  --pico-font-weight: 700;
  font-style: normal;
}

h4 {
  --pico-font-size: 1.15rem;
  --pico-font-weight: 400;
  font-style: italic;
}

h5,
h6 {
  --pico-font-weight: 400;
  font-style: normal;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --pico-background-color: var(--brand-gray-100);
  --pico-color: var(--brand-gray-900);
  --pico-muted-color: var(--brand-gray-600);
  --pico-muted-border-color: var(--brand-gray-200);

  --pico-h1-color: var(--pico-color);
  --pico-h2-color: var(--pico-color);
  --pico-h3-color: var(--pico-color);
  --pico-h4-color: var(--pico-color);
  --pico-h5-color: var(--pico-color);
  --pico-h6-color: var(--pico-color);

  --pico-primary: var(--brand-gray-900);
  --pico-primary-background: var(--brand-gray-900);
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-underline: color-mix(
    in srgb,
    var(--brand-gray-900) 50%,
    transparent
  );
  --pico-primary-hover: var(--brand-gray-950);
  --pico-primary-hover-background: var(--brand-color-primary);
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: color-mix(
    in srgb,
    var(--brand-gray-900) 25%,
    transparent
  );
  --pico-primary-inverse: var(--brand-gray-100);

  --pico-secondary: var(--brand-gray-600);
  --pico-secondary-background: var(--brand-gray-600);
  --pico-secondary-border: var(--pico-secondary-background);
  --pico-secondary-underline: color-mix(
    in srgb,
    var(--brand-gray-600) 50%,
    transparent
  );
  --pico-secondary-hover: var(--brand-gray-700);
  --pico-secondary-hover-background: var(--brand-gray-700);
  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
  --pico-secondary-hover-underline: var(--pico-secondary-hover);
  --pico-secondary-focus: color-mix(
    in srgb,
    var(--brand-gray-600) 25%,
    transparent
  );
  --pico-secondary-inverse: var(--brand-gray-100);

  --pico-contrast: var(--brand-color-primary);
  --pico-contrast-background: var(--brand-color-primary);
  --pico-contrast-border: var(--pico-contrast-background);
  --pico-contrast-underline: color-mix(
    in srgb,
    var(--brand-color-primary) 50%,
    transparent
  );
  --pico-contrast-hover: color-mix(
    in srgb,
    var(--brand-color-primary) 88%,
    var(--brand-gray-950)
  );
  --pico-contrast-hover-background: var(--pico-contrast-hover);
  --pico-contrast-hover-border: var(--pico-contrast-hover-background);
  --pico-contrast-hover-underline: var(--pico-contrast-hover);
  --pico-contrast-focus: color-mix(
    in srgb,
    var(--brand-color-primary) 25%,
    transparent
  );
  --pico-contrast-inverse: var(--brand-gray-100);

  --pico-mark-background-color: var(--brand-color-yellow-soft);
  --pico-mark-color: var(--brand-gray-950);
  --pico-ins-color: var(--brand-color-green);
  --pico-del-color: var(--brand-color-red);

  --pico-code-background-color: var(--brand-gray-200);
  --pico-code-color: var(--brand-gray-700);

  --pico-form-element-background-color: var(--brand-gray-50);
  --pico-form-element-selected-background-color: var(--brand-gray-200);
  --pico-form-element-border-color: var(--brand-gray-300);
  --pico-form-element-color: var(--brand-gray-900);
  --pico-form-element-placeholder-color: var(--brand-gray-500);
  --pico-form-element-active-background-color: var(--brand-gray-50);
  --pico-form-element-invalid-border-color: var(--brand-color-red-soft);
  --pico-form-element-invalid-active-border-color: var(--brand-color-red);
  --pico-form-element-invalid-focus-color: var(
    --pico-form-element-invalid-active-border-color
  );
  --pico-form-element-valid-border-color: var(--brand-color-green-soft);
  --pico-form-element-valid-active-border-color: var(--brand-color-green);
  --pico-form-element-valid-focus-color: var(
    --pico-form-element-valid-active-border-color
  );

  --pico-switch-background-color: var(--brand-gray-300);
  --pico-switch-color: var(--brand-gray-50);
  --pico-range-border-color: var(--brand-gray-200);
  --pico-range-active-border-color: var(--brand-gray-300);
  --pico-range-thumb-border-color: var(--pico-background-color);

  --pico-card-background-color: var(--brand-gray-50);
  --pico-card-sectioning-background-color: var(--brand-gray-50);
  --pico-dropdown-background-color: var(--brand-gray-50);
  --pico-dropdown-border-color: var(--brand-gray-200);
  --pico-dropdown-hover-background-color: var(--brand-gray-200);
  --pico-progress-background-color: var(--brand-gray-200);

  --pico-table-row-stripped-background-color: color-mix(
    in srgb,
    var(--brand-gray-200) 45%,
    transparent
  );
  --pico-modal-overlay-background-color: color-mix(
    in srgb,
    var(--brand-gray-200) 75%,
    transparent
  );
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --pico-background-color: var(--brand-gray-900);
    --pico-color: var(--brand-gray-100);
    --pico-muted-color: var(--brand-gray-400);
    --pico-muted-border-color: var(--brand-gray-800);

    --pico-h1-color: var(--pico-color);
    --pico-h2-color: var(--pico-color);
    --pico-h3-color: var(--pico-color);
    --pico-h4-color: var(--pico-color);
    --pico-h5-color: var(--pico-color);
    --pico-h6-color: var(--pico-color);

    --pico-primary: var(--brand-gray-100);
    --pico-primary-background: var(--brand-gray-300);
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: color-mix(
      in srgb,
      var(--brand-gray-100) 50%,
      transparent
    );
    --pico-primary-hover: var(--brand-gray-50);
    --pico-primary-hover-background: var(--brand-color-primary);
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: color-mix(
      in srgb,
      var(--brand-gray-300) 25%,
      transparent
    );
    --pico-primary-inverse: var(--brand-gray-900);

    --pico-secondary: var(--brand-gray-400);
    --pico-secondary-background: var(--brand-gray-600);
    --pico-secondary-border: var(--pico-secondary-background);
    --pico-secondary-underline: color-mix(
      in srgb,
      var(--brand-gray-400) 50%,
      transparent
    );
    --pico-secondary-hover: var(--brand-gray-300);
    --pico-secondary-hover-background: var(--brand-gray-500);
    --pico-secondary-hover-border: var(--pico-secondary-hover-background);
    --pico-secondary-hover-underline: var(--pico-secondary-hover);
    --pico-secondary-focus: color-mix(
      in srgb,
      var(--brand-gray-600) 25%,
      transparent
    );
    --pico-secondary-inverse: var(--brand-gray-100);

    --pico-contrast: var(--brand-color-primary);
    --pico-contrast-background: var(--brand-color-primary);
    --pico-contrast-border: var(--pico-contrast-background);
    --pico-contrast-underline: color-mix(
      in srgb,
      var(--brand-color-primary) 50%,
      transparent
    );
    --pico-contrast-hover: color-mix(
      in srgb,
      var(--brand-color-primary) 88%,
      var(--brand-gray-50)
    );
    --pico-contrast-hover-background: var(--pico-contrast-hover);
    --pico-contrast-hover-border: var(--pico-contrast-hover-background);
    --pico-contrast-hover-underline: var(--pico-contrast-hover);
    --pico-contrast-focus: color-mix(
      in srgb,
      var(--brand-color-primary) 25%,
      transparent
    );
    --pico-contrast-inverse: var(--brand-gray-950);

    --pico-mark-background-color: var(--brand-color-primary);
    --pico-mark-color: var(--brand-gray-950);
    --pico-ins-color: var(--brand-color-green-soft);
    --pico-del-color: var(--brand-color-red-soft);

    --pico-code-background-color: var(--brand-gray-800);
    --pico-code-color: var(--brand-gray-400);

    --pico-form-element-background-color: var(--brand-gray-800);
    --pico-form-element-selected-background-color: var(--brand-gray-700);
    --pico-form-element-border-color: var(--brand-gray-700);
    --pico-form-element-color: var(--brand-gray-100);
    --pico-form-element-placeholder-color: var(--brand-gray-500);
    --pico-form-element-active-background-color: var(--brand-gray-800);
    --pico-form-element-invalid-border-color: var(--brand-color-red);
    --pico-form-element-invalid-active-border-color: var(
      --brand-color-red-soft
    );
    --pico-form-element-invalid-focus-color: var(
      --pico-form-element-invalid-active-border-color
    );
    --pico-form-element-valid-border-color: var(--brand-color-green);
    --pico-form-element-valid-active-border-color: var(
      --brand-color-green-soft
    );
    --pico-form-element-valid-focus-color: var(
      --pico-form-element-valid-active-border-color
    );

    --pico-switch-background-color: var(--brand-gray-700);
    --pico-switch-color: var(--brand-gray-50);
    --pico-range-border-color: var(--brand-gray-800);
    --pico-range-active-border-color: var(--brand-gray-700);
    --pico-range-thumb-border-color: var(--pico-background-color);

    --pico-card-background-color: var(--brand-gray-800);
    --pico-card-sectioning-background-color: var(--brand-gray-800);
    --pico-dropdown-background-color: var(--brand-gray-900);
    --pico-dropdown-border-color: var(--brand-gray-800);
    --pico-dropdown-hover-background-color: var(--brand-gray-800);
    --pico-progress-background-color: var(--brand-gray-800);

    --pico-table-row-stripped-background-color: color-mix(
      in srgb,
      var(--brand-gray-800) 45%,
      transparent
    );
    --pico-modal-overlay-background-color: color-mix(
      in srgb,
      var(--brand-gray-950) 75%,
      transparent
    );
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --pico-background-color: var(--brand-gray-900);
  --pico-color: var(--brand-gray-100);
  --pico-muted-color: var(--brand-gray-400);
  --pico-muted-border-color: var(--brand-gray-800);

  --pico-h1-color: var(--pico-color);
  --pico-h2-color: var(--pico-color);
  --pico-h3-color: var(--pico-color);
  --pico-h4-color: var(--pico-color);
  --pico-h5-color: var(--pico-color);
  --pico-h6-color: var(--pico-color);

  --pico-primary: var(--brand-gray-100);
  --pico-primary-background: var(--brand-gray-300);
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-underline: color-mix(
    in srgb,
    var(--brand-gray-100) 50%,
    transparent
  );
  --pico-primary-hover: var(--brand-gray-50);
  --pico-primary-hover-background: var(--brand-color-primary);
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: color-mix(
    in srgb,
    var(--brand-gray-300) 25%,
    transparent
  );
  --pico-primary-inverse: var(--brand-gray-900);

  --pico-secondary: var(--brand-gray-400);
  --pico-secondary-background: var(--brand-gray-600);
  --pico-secondary-border: var(--pico-secondary-background);
  --pico-secondary-underline: color-mix(
    in srgb,
    var(--brand-gray-400) 50%,
    transparent
  );
  --pico-secondary-hover: var(--brand-gray-300);
  --pico-secondary-hover-background: var(--brand-gray-500);
  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
  --pico-secondary-hover-underline: var(--pico-secondary-hover);
  --pico-secondary-focus: color-mix(
    in srgb,
    var(--brand-gray-600) 25%,
    transparent
  );
  --pico-secondary-inverse: var(--brand-gray-100);

  --pico-contrast: var(--brand-color-primary);
  --pico-contrast-background: var(--brand-color-primary);
  --pico-contrast-border: var(--pico-contrast-background);
  --pico-contrast-underline: color-mix(
    in srgb,
    var(--brand-color-primary) 50%,
    transparent
  );
  --pico-contrast-hover: color-mix(
    in srgb,
    var(--brand-color-primary) 88%,
    var(--brand-gray-50)
  );
  --pico-contrast-hover-background: var(--pico-contrast-hover);
  --pico-contrast-hover-border: var(--pico-contrast-hover-background);
  --pico-contrast-hover-underline: var(--pico-contrast-hover);
  --pico-contrast-focus: color-mix(
    in srgb,
    var(--brand-color-primary) 25%,
    transparent
  );
  --pico-contrast-inverse: var(--brand-gray-950);

  --pico-mark-background-color: var(--brand-color-primary);
  --pico-mark-color: var(--brand-gray-950);
  --pico-ins-color: var(--brand-color-green-soft);
  --pico-del-color: var(--brand-color-red-soft);

  --pico-code-background-color: var(--brand-gray-800);
  --pico-code-color: var(--brand-gray-400);

  --pico-form-element-background-color: var(--brand-gray-800);
  --pico-form-element-selected-background-color: var(--brand-gray-700);
  --pico-form-element-border-color: var(--brand-gray-700);
  --pico-form-element-color: var(--brand-gray-100);
  --pico-form-element-placeholder-color: var(--brand-gray-500);
  --pico-form-element-active-background-color: var(--brand-gray-800);
  --pico-form-element-invalid-border-color: var(--brand-color-red);
  --pico-form-element-invalid-active-border-color: var(--brand-color-red-soft);
  --pico-form-element-invalid-focus-color: var(
    --pico-form-element-invalid-active-border-color
  );
  --pico-form-element-valid-border-color: var(--brand-color-green);
  --pico-form-element-valid-active-border-color: var(--brand-color-green-soft);
  --pico-form-element-valid-focus-color: var(
    --pico-form-element-valid-active-border-color
  );

  --pico-switch-background-color: var(--brand-gray-700);
  --pico-switch-color: var(--brand-gray-50);
  --pico-range-border-color: var(--brand-gray-800);
  --pico-range-active-border-color: var(--brand-gray-700);
  --pico-range-thumb-border-color: var(--pico-background-color);

  --pico-card-background-color: var(--brand-gray-800);
  --pico-card-sectioning-background-color: var(--brand-gray-800);
  --pico-dropdown-background-color: var(--brand-gray-900);
  --pico-dropdown-border-color: var(--brand-gray-800);
  --pico-dropdown-hover-background-color: var(--brand-gray-800);
  --pico-progress-background-color: var(--brand-gray-800);

  --pico-table-row-stripped-background-color: color-mix(
    in srgb,
    var(--brand-gray-800) 45%,
    transparent
  );
  --pico-modal-overlay-background-color: color-mix(
    in srgb,
    var(--brand-gray-950) 75%,
    transparent
  );
}