/* Three expression modes on one core. Apply with data-mode on <html>, a section, or a band. */

[data-mode="editorial"]{
  --surface-page:var(--paper);
  --surface-raised:var(--color-background-primary);
  --surface-accent:var(--color-brand-signal);
  --accent:var(--color-brand-signal);
  --accent-deep:var(--color-brand-signal-deep);
  --text-accent:var(--color-brand-signal-deep);
  --section:var(--section-loose);
  --type-h1:var(--weight-regular) clamp(2.75rem,5vw,5rem)/0.96 var(--font-sans);
  --measure-reading:68ch;
}

[data-mode="institutional"]{
  --surface-page:var(--color-background-primary);
  --surface-raised:var(--color-background-primary);
  --surface-sunken:var(--color-background-secondary);
  --surface-accent:var(--color-brand-primary);
  --accent:var(--color-brand-primary);
  --accent-deep:var(--color-brand-primary);
  --text-accent:var(--color-brand-primary);
  --focus-ring:var(--color-brand-primary);
  --section:var(--section-tight);
  --type-h1:var(--weight-medium) clamp(2.25rem,4vw,3.75rem)/1.02 var(--font-sans);
  --measure-reading:62ch;
}

[data-mode="campaign"]{
  --surface-page:var(--ink);
  --surface-raised:var(--profile-ink-soft);
  --surface-sunken:var(--profile-ink-soft);
  --surface-inverse:var(--paper);
  --surface-accent:var(--color-brand-signal);
  --text-primary:var(--paper);
  --text-secondary:color-mix(in oklab,var(--paper) 74%,transparent);
  --text-tertiary:color-mix(in oklab,var(--paper) 54%,transparent);
  --text-meta:color-mix(in oklab,var(--paper) 60%,transparent);
  --text-inverse:var(--ink);
  --text-accent:var(--color-brand-signal);
  --text-link:var(--paper);
  --text-link-hover:var(--color-brand-signal);
  --accent:var(--color-brand-signal);
  --accent-deep:var(--color-brand-signal-deep);
  --rule-hair:color-mix(in oklab,var(--paper) 26%,transparent);
  --rule-strong:var(--paper);
  --border-field:color-mix(in oklab,var(--paper) 40%,transparent);
  --border-field-hover:var(--paper);
  --focus-ring:var(--color-brand-signal);
  --section:var(--section-loose);
}