/* Semantic aliases. Two authorized fields: DARK (immersive) and LIGHT (editorial pause).
   Every text pair below is WCAG AA or better. Gold is never small text on ivory/white. */
:root{
  /* LIGHT field — ivory editorial, default */
  --js-surface-page:var(--js-color-ivory);
  --js-surface-raised:var(--js-color-white);
  --js-surface-inverse:var(--js-color-black);
  --js-text-primary:var(--js-color-black);
  --js-text-secondary:rgba(0,0,0,.68);
  --js-text-on-media:var(--js-color-white);
  --js-accent:var(--js-color-gold);
  --js-accent-text-min-size:18px; /* @kind spacing */  /* gold as text only at 18px+ and 600 weight, on black/charcoal */
  --js-line-hairline:var(--js-black-a14);
  --js-line-guide:var(--js-color-gold);
  --js-header-scrim:var(--js-ivory-a88);
  --js-focus-ring:var(--js-color-black);

  /* Component semantics — LIGHT field */
  --js-button-primary-bg:var(--js-color-black);
  --js-button-primary-fg:var(--js-color-ivory);
  --js-button-primary-bg-hover:var(--js-color-charcoal);
  --js-button-secondary-fg:var(--js-color-black);
  --js-button-secondary-border:var(--js-color-gold);
  --js-link-fg:var(--js-color-black);
  --js-link-underline:var(--js-color-gold);
  --js-overlay-media:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.36) 46%,rgba(0,0,0,.12) 100%); /* @kind color */
}
/* DARK field — immersive black/charcoal */
.js-field-dark{
  --js-surface-page:var(--js-color-black);
  --js-surface-raised:var(--js-color-charcoal);
  --js-surface-inverse:var(--js-color-ivory);
  --js-text-primary:var(--js-color-white);
  --js-text-secondary:var(--js-white-a72);
  --js-line-hairline:var(--js-white-a14);
  --js-header-scrim:var(--js-black-a88);
  --js-focus-ring:var(--js-color-gold);
  --js-button-primary-bg:var(--js-color-ivory);
  --js-button-primary-fg:var(--js-color-black);
  --js-button-primary-bg-hover:var(--js-color-white);
  --js-button-secondary-fg:var(--js-color-white);
  --js-button-secondary-border:var(--js-color-gold);
  --js-link-fg:var(--js-color-white);
  --js-link-underline:var(--js-color-gold);
  color:var(--js-text-primary);
  background:var(--js-surface-page);
}
.js-field-light{color:var(--js-text-primary);background:var(--js-surface-page)}
