/* Light / dark / system theme for every auxfield.com page.
   Load before the page's own <style>, with /theme.js in <head>.

   Colors are the brand palette (brand_kit, guidelines p.6): on paper use
   Teal and Tint; on ink use Teal·dark and Tint·dark. One color family, no
   second accent. --ink and --paper are roles, not swatches: --ink is the
   text color and --paper the ground, so they swap in dark. On screen the
   light ground is a pale mint (#E7EFEB) rather than print Paper (#F2F1EC),
   to take the glare off; print and documents stay on Paper. */

:root {
  color-scheme: light dark;

  --teal: light-dark(#0C8577, #2EA799);
  --teal-hover: light-dark(#0A6F64, #4DBBAE);
  /* Teal as text or icon color: darker than brand Teal on light grounds so
     small text passes 4.5:1 on the mint page (5.5:1) and on teal-tinted
     panels (4.7:1). Brand Teal stays for fills, borders and the mark. */
  --teal-text: light-dark(#086B5F, #2EA799);
  --on-teal: light-dark(#FFFFFF, #0E0F12);
  --tint: light-dark(#84BDB4, #216760);
  --ink: light-dark(#0E0F12, #F2F1EC);
  --paper: light-dark(#E7EFEB, #0E0F12);
  --muted: light-dark(#5A6E6A, #8FA19C);
  --placeholder: light-dark(#8A9692, #66797A);
  --line: light-dark(rgba(14, 15, 18, 0.1), rgba(242, 241, 236, 0.13));
  --panel: light-dark(rgba(255, 255, 255, 0.45), rgba(242, 241, 236, 0.04));
  --field: light-dark(#F7FAF9, rgba(242, 241, 236, 0.06));
  --code: light-dark(#0E0F12, #16181D);
  --ok: light-dark(#1B7A4A, #5CC48E);

  /* Feature panels (product heroes, product tiles, the NDA banner) are panes
     of teal glass. Dark: the brand dark background, deep opaque teal with
     Teal·dark dots. Light: a thin translucent teal tint over the page, blurred,
     with a white sheen from the top-left, a teal hairline and Ink text.
     Components set the gradient shape; these set the colors. The sheen is
     transparent in dark, so dark keeps its look. */
  --feature-a: light-dark(rgba(12, 133, 119, 0.1), #18403B);
  --feature-b: light-dark(rgba(12, 133, 119, 0.05), #12302D);
  --feature-c: light-dark(rgba(12, 133, 119, 0.12), #0C1F1D);
  --feature-sheen-a: light-dark(rgba(255, 255, 255, 0.7), transparent);
  --feature-sheen-b: light-dark(rgba(255, 255, 255, 0.15), transparent);
  --feature-blur: blur(12px) saturate(1.4);
  --feature-border: light-dark(rgba(12, 133, 119, 0.22), transparent);
  --feature-glow: light-dark(rgba(12, 133, 119, 0.1), rgba(46, 167, 153, 0.16));
  --feature-glow-hover: light-dark(rgba(12, 133, 119, 0.16), rgba(46, 167, 153, 0.26));
  --feature-dots: light-dark(rgba(12, 133, 119, 0.3), rgba(46, 167, 153, 0.32));
  --feature-fg: light-dark(#0E0F12, #FFFFFF);
  --feature-muted: light-dark(#4A5C58, rgba(255, 255, 255, 0.78));
  --feature-edge: light-dark(rgba(12, 133, 119, 0.45), rgba(46, 167, 153, 0.5));
  --feature-shadow: light-dark(rgba(12, 31, 29, 0.28), rgba(12, 31, 29, 0.8));
  --feature-outline: light-dark(rgba(14, 15, 18, 0.35), rgba(255, 255, 255, 0.55));
  --feature-btn-hover-bg: light-dark(#0C8577, #FFFFFF);
  --feature-btn-hover-fg: light-dark(#FFFFFF, #12302D);
  --bad: light-dark(#A33B2D, #E8826F);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Browser defaults (blue links, blue checkboxes) become brand teal.
   Zero specificity, so any page rule still wins. */
:where(:root) { accent-color: var(--teal); }
:where(a) { color: var(--teal-text); }

/* Logos: the color version on paper, the reversed version on ink. */
:root[data-theme="light"] .on-dark,
:root[data-theme="dark"] .on-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .on-light { display: none !important; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .on-dark { display: none !important; }
}

/* Header end: the page's nav link plus the theme button. */
.head-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle {
  position: relative;
  flex: none;
}
.theme-toggle > button {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.theme-toggle > button:hover,
.theme-toggle > button[aria-expanded="true"] { color: var(--teal-text); }
.theme-toggle > button svg { width: 1rem; height: 1rem; }
.theme-toggle button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.theme-toggle [role="menu"] {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 50;
  min-width: 9rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 12px 32px -16px rgba(14, 15, 18, 0.35);
}
.theme-toggle [role="menu"][hidden] { display: none; }
.theme-toggle [role="menuitemradio"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.theme-toggle [role="menuitemradio"]:hover,
.theme-toggle [role="menuitemradio"]:focus-visible {
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  outline: none;
}
.theme-toggle [role="menuitemradio"] svg { width: 0.9rem; height: 0.9rem; color: var(--muted); }
.theme-toggle [role="menuitemradio"] svg:last-child { visibility: hidden; color: var(--teal-text); }
.theme-toggle [role="menuitemradio"][aria-checked="true"] { color: var(--teal-text); }
.theme-toggle [role="menuitemradio"][aria-checked="true"] svg { color: var(--teal-text); }
.theme-toggle [role="menuitemradio"][aria-checked="true"] svg:last-child { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle > button { transition: none; }
}