/*
 * Brand styling inspired by The Home Depot brand guidelines.
 * Primary: Home Depot Orange (#F96302)
 * Neutrals: charcoal text on white, near-black surfaces in dark mode.
 */

:root {
  --hd-orange: #F96302;
  --hd-orange-dark: #E55A00;
  --hd-orange-light: #FF7A29;
  --hd-charcoal: #333333;
  --hd-grey: #7B7B7B;
}

/* ---- Primary color (header, links, nav highlights) ---- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--hd-orange);
  --md-primary-fg-color--light: var(--hd-orange-light);
  --md-primary-fg-color--dark: var(--hd-orange-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* ---- Accent color (hover, active, focus) ---- */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--hd-orange-dark);
  --md-accent-fg-color--transparent: rgba(249, 99, 2, 0.1);
}

/* ---- Light scheme tuning ---- */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--hd-orange-dark);
  --md-default-fg-color: var(--hd-charcoal);
}

/* ---- Dark scheme tuning: keep orange legible on slate ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--hd-orange);
  --md-typeset-a-color: var(--hd-orange-light);
  --md-default-bg-color: #1c1c1c;
}

/* Bold, blocky headings echo the Home Depot signage style. */
.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Orange underline accent under the top-level page title. */
.md-typeset h1 {
  border-bottom: 3px solid var(--hd-orange);
  padding-bottom: 0.25rem;
}