/* ─────────────────────────────────────────────────────────────────────────────
   AFNIO DOCS — TELLURIO BRAND COLORS
   Primary accent: hsl(71, 85%, 40%) — GameBoy yellow-green (#9BBC0F)

   Values mapped from Tellurio landing page globals.css.
   Light mode uses darkened brand (32% L) for WCAG AA contrast on white.
   Dark mode uses full brand (40% L) — 9.33:1 on near-black.
───────────────────────────────────────────────────────────────────────────── */

/* ── Light mode ── */
:root,
[data-md-color-scheme="default"] {
  /* brand */
  --md-primary-fg-color:             hsl(71, 80%, 32%);
  /* brand-200 */
  --md-primary-fg-color--light:      hsl(71, 80%, 48%);
  /* derived — pressed/active states */
  --md-primary-fg-color--dark:       hsl(71, 80%, 24%);
  /* brand-foreground */
  --md-primary-bg-color:             hsl(0, 0%, 100%);
  --md-primary-bg-color--light:      hsla(0, 0%, 100%, 0.7);

  /* brand (same as primary — monochromatic) */
  --md-accent-fg-color:              hsl(71, 80%, 32%);
  --md-accent-fg-color--transparent: hsla(71, 80%, 32%, 0.1);
  /* brand-foreground */
  --md-accent-bg-color:              hsl(0, 0%, 100%);
  --md-accent-bg-color--light:       hsla(0, 0%, 100%, 0.7);

  /* brand */
  --md-typeset-a-color:              hsl(71, 80%, 32%);

  /* te-foreground / te-background */
  --md-default-fg-color:             hsl(0, 0%, 4%);
  --md-default-bg-color:             hsl(0, 0%, 96%);
  --md-default-bg-color--light:      hsla(0, 0%, 96%, 0.7);
  --md-footer-bg-color:              hsl(0, 0%, 96%);
}

/* ── Dark mode (slate) ── */
[data-md-color-scheme="slate"] {
  /* brand */
  --md-primary-fg-color:             hsl(71, 85%, 40%);
  /* brand-200 */
  --md-primary-fg-color--light:      hsl(71, 85%, 65%);
  /* derived — pressed/active states */
  --md-primary-fg-color--dark:       hsl(71, 85%, 30%);
  /* brand-foreground */
  --md-primary-bg-color:             hsl(80, 75%, 3%);
  --md-primary-bg-color--light:      hsla(80, 75%, 3%, 0.7);

  /* brand (same as primary — monochromatic) */
  --md-accent-fg-color:              hsl(71, 85%, 40%);
  --md-accent-fg-color--transparent: hsla(71, 85%, 40%, 0.1);
  /* brand-foreground */
  --md-accent-bg-color:              hsl(80, 75%, 3%);
  --md-accent-bg-color--light:       hsla(80, 75%, 3%, 0.7);

  /* brand */
  --md-typeset-a-color:              hsl(71, 85%, 40%);

  /* te-foreground / te-background */
  --md-default-fg-color:             hsl(0, 0%, 92%);
  --md-default-bg-color:             hsl(0, 0%, 4%);
  --md-default-bg-color--light:      hsla(0, 0%, 4%, 0.7);
  --md-footer-bg-color:              hsl(0, 0%, 4%);
}

/* ── Logo: brand color via currentColor ── */
.md-logo {
  color: var(--md-primary-fg-color);
}
.md-logo svg {
  width: 100%;
  height: auto;
}

/* ── Footer meta: match page background ── */
.md-footer-meta {
  background-color: var(--md-default-bg-color);
}

/* ── Link hover: shift to brand-200 for visible feedback ── */
.md-typeset a:hover {
  color: var(--md-primary-fg-color--light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TELLURIO globals.css → Zensical variable mapping reference

   --md-primary-fg-color             ← --color-brand
   --md-primary-fg-color--light      ← --color-brand-200
   --md-primary-fg-color--dark       ← (derived, not in globals.css)
   --md-primary-bg-color             ← --color-brand-foreground
   --md-primary-bg-color--light      ← (derived from brand-foreground)
   --md-accent-fg-color              ← --color-brand
   --md-accent-fg-color--transparent ← (derived from brand)
   --md-accent-bg-color              ← --color-brand-foreground
   --md-accent-bg-color--light       ← (derived from brand-foreground)
   --md-typeset-a-color              ← --color-brand
   --md-default-fg-color             ← --color-te-foreground
   --md-default-bg-color             ← --color-te-background
   --md-footer-bg-color              ← --color-te-background
───────────────────────────────────────────────────────────────────────────── */