/* ============================================================
   GlobalBases.com — Material for MkDocs brand theme
   Brand orange sampled from logo: #F7A600 (RGB 247, 166, 0)

   How the colors are chosen:
   - #F7A600 is a bright, luminous orange. White text on it only
     reaches ~2:1 contrast (fails WCAG), so the header/nav use
     DARK text on the orange instead (~10:1 — very readable).
   - Body links use a slightly deeper orange (#A85F00) so link
     text stays >=4.5:1 on white. In dark mode links go bright
     (#FFC24D), which reads well on the dark background.

   These overrides are scoped to the color scheme, so the light/
   dark toggle keeps working. Tweak the hex values below to taste.
   ============================================================ */

/* ---- Brand palette as reusable tokens ---------------------- */
:root {
  --gb-orange:        #F7A600;  /* primary brand */
  --gb-orange-light:  #FFC24D;  /* lighter tint  */
  --gb-orange-dark:   #C97E00;  /* deeper shade  */
  --gb-orange-link:   #A85F00;  /* accessible link on white (~4.7:1) */
  --gb-ink:           #1A1A1A;  /* dark text used on the orange header */
}

/* ============================================================
   LIGHT MODE  (scheme: default)
   ============================================================ */
[data-md-color-scheme="default"] {
  /* Primary = header bar, nav highlights, primary buttons */
  --md-primary-fg-color:        var(--gb-orange);
  --md-primary-fg-color--light: var(--gb-orange-light);
  --md-primary-fg-color--dark:  var(--gb-orange-dark);

  /* Foreground drawn ON the orange primary (title, icons, hamburger).
     Kept dark for contrast against the bright orange. */
  --md-primary-bg-color:        var(--gb-ink);
  --md-primary-bg-color--light: rgba(26, 26, 26, 0.7);

  /* Accent = hover / focus / active states */
  --md-accent-fg-color:             var(--gb-orange-dark);
  --md-accent-fg-color--transparent: rgba(201, 126, 0, 0.1);

  /* Body link color — the accessible deeper orange */
  --md-typeset-a-color: var(--gb-orange-link);
}

/* ============================================================
   DARK MODE  (scheme: slate)
   ============================================================ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--gb-orange);
  --md-primary-fg-color--light: var(--gb-orange-light);
  --md-primary-fg-color--dark:  var(--gb-orange-dark);

  /* Dark text still reads well on the orange header in dark mode */
  --md-primary-bg-color:        var(--gb-ink);
  --md-primary-bg-color--light: rgba(26, 26, 26, 0.7);

  --md-accent-fg-color:             var(--gb-orange-light);
  --md-accent-fg-color--transparent: rgba(255, 194, 77, 0.1);

  /* Bright orange links pop against the dark background */
  --md-typeset-a-color: var(--gb-orange-light);

  /* OPTIONAL: warm the default blue-grey dark background toward a
     neutral/warm tone that suits an orange brand. Uncomment to try. */
  /* --md-hue: 30; */
}

/* ============================================================
   Small polish (optional — delete any you don't want)
   ============================================================ */

/* Search box focus ring picks up the brand accent */
.md-search__form:focus-within {
  box-shadow: 0 0 0 2px var(--gb-orange);
}

/* Make the "primary" call-to-action button unmistakably branded */
.md-typeset .md-button--primary {
  background-color: var(--gb-orange);
  border-color: var(--gb-orange);
  color: var(--gb-ink);
}
.md-typeset .md-button--primary:hover {
  background-color: var(--gb-orange-dark);
  border-color: var(--gb-orange-dark);
  color: #fff;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}