/* N3XD brand theming for the documentation site.
 *
 * Follows the zensical custom color scheme approach
 * (https://zensical.org/docs/setup/colors/#custom-color-schemes): override the
 * Material `--md-*` CSS variables per [data-md-color-scheme]. Colors mirror the
 * app design tokens (../DESIGN-GUIDELINES.md): neutral white / near-black
 * surfaces with a single amber accent (#EAAC0F). The built-in `default` (light)
 * and `slate` (dark) schemes are kept as the base so all of Material's derived
 * styling stays correct; only the brand-relevant variables are remapped.
 *
 * NOTE: the modern theme paints a frosted, translucent header via
 * `.md-header { backdrop-filter: blur(...); background: var(--md-default-bg-color--light) }`,
 * so `--md-default-bg-color--light` is kept a *translucent* alpha of the
 * background (matching the app's `bg-card/80 backdrop-blur` shell). Do not set
 * it to an opaque color or the header stops being see-through.
 */

/* Amber brand primary, shared by both schemes. Near-black text sits on the
 * amber primary for contrast (mirrors --primary-foreground). */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #eaac0f;
  --md-primary-fg-color--light: #d8ae4e;
  --md-primary-fg-color--dark:  #a67912;
  --md-primary-bg-color:        #1a1a1a;
  --md-primary-bg-color--light: rgba(26, 26, 26, 0.7);

  /* Footer stays dark in both schemes (Material convention), neutral tokens. */
  --md-footer-bg-color:         #1a1a1a;
  --md-footer-bg-color--dark:   #0a0a0a;
}

/* Light: white background, near-black text, darker amber links for contrast. */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           #ffffff;
  --md-default-bg-color--light:    rgba(255, 255, 255, 0.7);
  --md-default-bg-color--lighter:  rgba(255, 255, 255, 0.3);
  --md-default-bg-color--lightest: rgba(255, 255, 255, 0.12);

  --md-default-fg-color:           #1a1a1a;
  --md-default-fg-color--light:    #6b6b6b;
  --md-default-fg-color--lighter:  #9e9e9e;
  --md-default-fg-color--lightest: #e4e4e4;

  --md-accent-fg-color:            #a67912;
  --md-typeset-a-color:            #a67912;

  --md-code-bg-color:              #f2f2f2;
  --md-code-fg-color:              #1a1a1a;
}

/* Dark: near-black background, off-white text, amber links. Surfaces lift to
 * #1a1a1a (--card) so code/blocks read against the #0a0a0a backdrop. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0a0a0a;
  --md-default-bg-color--light:    rgba(10, 10, 10, 0.7);
  --md-default-bg-color--lighter:  rgba(10, 10, 10, 0.3);
  --md-default-bg-color--lightest: rgba(10, 10, 10, 0.12);

  --md-default-fg-color:           #f5f5f5;
  --md-default-fg-color--light:    #a3a3a3;
  --md-default-fg-color--lighter:  #6b6b6b;
  --md-default-fg-color--lightest: #2a2a2a;

  --md-accent-fg-color:            #d8ae4e;
  --md-typeset-a-color:            #eaac0f;

  --md-code-bg-color:              #1a1a1a;
  --md-code-fg-color:              #f5f5f5;
}

/* The theme highlights the active sidebar entry with a
 * `--md-accent-fg-color--transparent` fill, which is still the built-in indigo
 * (#526cfe1a) because only the opaque accent is remapped above. Drop the fill in
 * both schemes; the amber accent color and heavier weight the theme also applies
 * keep the selection visible. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  background: none;
}