/*
 * sd-brand.css — makes the Astra chrome follow sd-tokens.css, site-wide.
 * Enqueued after astra-theme-css (and its inline dynamic CSS) and sd-tokens, so these
 * rules win on equal specificity by source order. sd-tokens.css itself is never edited.
 * Uses sd-tokens custom properties only.
 */

/* Astra global palette -> token values. Slot roles per Astra: 0 primary/links, 1 accent,
   2 headings, 3 body text, 4 alt background, 5 white, 6 light surface, 7 buttons, 8 darkest. */
:root {
  --ast-global-color-0: var(--sd-sage-700);
  --ast-global-color-1: var(--sd-terracotta-400);
  --ast-global-color-2: var(--sd-warm-800);
  --ast-global-color-3: var(--sd-warm-700);
  --ast-global-color-4: var(--sd-cream-50);
  --ast-global-color-5: var(--sd-white);
  --ast-global-color-6: var(--sd-cream-100);
  --ast-global-color-7: var(--sd-terracotta-400);
  --ast-global-color-8: var(--sd-warm-900);
}

/* Typography: Inter for body, Fraunces for headings and the site title. */
body,
button,
input,
select,
optgroup,
textarea {
  font-family: var(--sd-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.site-title,
.site-title a {
  font-family: var(--sd-font-serif);
}

/* Header: token surface background, sage site title. */
.ast-primary-header-bar,
#masthead .main-header-bar {
  background-color: var(--sd-color-surface);
  border-bottom: 1px solid var(--sd-color-border-subtle);
}

#masthead .site-title a,
#masthead .site-title a:visited {
  color: var(--sd-color-primary);
}

#masthead .site-title a:hover,
#masthead .site-title a:focus-visible {
  color: var(--sd-color-primary-hover);
}