/* ==========================================================================
 * thecomp documentation — brand colour overrides for the Zensical theme.
 *
 * Palette pulled from lib/core/theme/app_theme.dart (AppColors):
 *   brand      #E8900A  (identity amber)
 *   brandLight #F5A829
 *   brandDark  #B86A00  (gradient stop / darker variant)
 *
 * The theme's palette entries set primary/accent to "custom", which makes
 * Material read these CSS custom properties instead of a named palette.
 *
 * Header text on the amber bar uses a near-black foreground for legibility
 * (white-on-amber fails WCAG AA at #E8900A). This mirrors the app's own
 * PrimaryCta rule (dark text on brand amber).
 * ========================================================================== */

/* Headings use Barlow Condensed, thecomp's display face (brand_guidelines.html
 * §05: "Barlow Condensed for all display, headings, stats"; DM Sans stays the
 * body face, set via zensical.toml theme.font). extra.css is linked after the
 * theme stylesheet, so these same-specificity rules win without !important. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&display=swap");

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Barlow Condensed", sans-serif;
}

.md-typeset h1,
.md-typeset h2 {
  font-weight: 800;
}

.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 700;
}

:root {
  --md-primary-fg-color:        #E8900A;
  --md-primary-fg-color--light: #F5A829;
  --md-primary-fg-color--dark:  #B86A00;

  /* Foreground (text/icons) drawn on top of the amber primary surface. */
  --md-primary-bg-color:        #0D1410;
  --md-primary-bg-color--light: rgba(13, 20, 16, 0.70);

  /* Accent drives link hover / active states. brandDark keeps AA contrast
   * against the white light-theme background. */
  --md-accent-fg-color:         #B86A00;
  --md-accent-fg-color--transparent: rgba(184, 106, 0, 0.10);
}

/* Dark ("slate") scheme — amber reads well on the dark surface, so use the
 * lighter brand tint for interactive accents. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #E8900A;
  --md-primary-fg-color--light: #F5A829;
  --md-primary-fg-color--dark:  #B86A00;

  --md-accent-fg-color:         #F5A829;
  --md-accent-fg-color--transparent: rgba(245, 168, 41, 0.10);
}