/* shared/themes.css — derived tokens shared by every edition when a theme is active.
   The five base colours (--t-bg, --t-fg, --t-a1, --t-a2, --t-a3) are set inline by shared/themes.js. */
html[data-palette] {
  --t-surface: color-mix(in srgb, var(--t-fg) 6%, var(--t-bg));
  --t-surface-2: color-mix(in srgb, var(--t-fg) 10%, var(--t-bg));
  --t-fg-2: color-mix(in srgb, var(--t-fg) 82%, var(--t-bg));
  --t-muted: color-mix(in srgb, var(--t-fg) 66%, var(--t-bg));
  --t-line: color-mix(in srgb, var(--t-fg) 14%, transparent);
  --t-line-strong: color-mix(in srgb, var(--t-fg) 34%, transparent);
  --t-line-control: color-mix(in srgb, var(--t-fg) 48%, transparent);   /* button borders: 3:1 against the background */
  --t-deep: color-mix(in srgb, var(--t-bg) 70%, black);
  --t-a1-soft: color-mix(in srgb, var(--t-a1) 16%, transparent);
  color-scheme: dark;
}
/* Swatch strip used by the theme picker in the switcher */
.swatches { display: inline-flex; gap: 2px; }
.swatches i { width: 12px; height: 16px; border-radius: 3px; display: inline-block; }