/* Option 6: Option 5's dark foundation, applied only when the theme toggle
   (or the visitor's OS setting) selects dark. Rules are Option 5's, scoped. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: var(--color-theme-dark-canvas);
  --surface: var(--color-theme-dark-surface-elevated);
  --muted-surface: var(--color-theme-dark-surface-muted);
  --text: var(--color-theme-dark-text-primary);
  --text-2: var(--color-theme-dark-text-secondary);
  --border: var(--color-theme-dark-border);
  --link: var(--color-brand-sky);
  --ink-blue: var(--color-chip-text-blue-on-dark);
  --shadow-raised: var(--shadow-raised-dark);
  --shadow-overlay: var(--shadow-raised-dark);
}

/* These branches communicate different behavioral paths on a dark canvas. */
[data-theme="dark"] .context-trace { opacity: var(--alpha-scrim); }

/* The supplied critical-on-dark tint keeps invalid fields distinguishable. */
[data-theme="dark"] .field input[aria-invalid="true"] {
  border-color: var(--color-chip-text-critical-on-dark);
}

/* Existing form code uses these roles for success, errors, and fallback links. */
[data-theme="dark"] .demo-form {
  --color-chip-text-success-on-light: var(--color-chip-text-success-on-dark);
  --color-chip-text-warning-on-light: var(--color-chip-text-warning-on-dark);
  --color-action-link: var(--color-brand-sky);
}

/* Preserve the supplied workspace mark on the dark canvas. */
[data-theme="dark"] .small-mark { filter: brightness(0) invert(1); }