/*
 * Amber Canary brand overrides on top of Pico CSS.
 * Palette and typography from the brand guide (_docs/branding.md in the
 * reference repo): Outfit typeface (Light 300 body), Primary Amber #F5A623,
 * Primary Dark #252542.
 */

:root {
  --pico-font-family: "Outfit", system-ui, sans-serif;
  --pico-font-weight: 300;

  /* Primary Amber, with darker hover/focus derived from Amber Dark */
  --pico-primary: #f5a623;
  --pico-primary-background: #f5a623;
  --pico-primary-border: #f5a623;
  --pico-primary-hover: #d08b0f;
  --pico-primary-hover-background: #d08b0f;
  --pico-primary-hover-border: #d08b0f;
  --pico-primary-underline: rgba(245, 166, 35, 0.5);
  --pico-primary-focus: rgba(245, 166, 35, 0.375);
  --pico-primary-inverse: #1a1a2e;
}

/* Dark scheme: keep the amber identity on the brand dark background */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-background-color: #1a1a2e;
    --pico-card-background-color: #252542;
    --pico-card-sectioning-background-color: #3a3a5c;
  }
}
[data-theme="dark"] {
  --pico-background-color: #1a1a2e;
  --pico-card-background-color: #252542;
  --pico-card-sectioning-background-color: #3a3a5c;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

strong,
b {
  font-weight: 500;
}

.brand-icon {
  color: #f5a623;
  vertical-align: -0.2em;
}