/* EAC colour system. Change palette values here, rather than in components.
   Papyrus & terracotta is the selected default; alternatives live in design/palettes.css.
   Photographs, media placeholder gradients, shadows and masks are not UI colours. */
:root {
  /* Brand foundations */
  --color-ink: #30271f;
  --color-paper: #f6eedf;
  --color-ivory: #fffbf3;
  --color-sand: #e7cda5;
  --color-terracotta: #a64b2e;
  --color-apricot: #f1b58b;
  --color-teal: #246963;
  --color-deep-teal: #193f3b;
  --color-gold: #e6bb76;
  --color-white: #fff;

  /* Roles used by the website */
  --color-background: var(--color-paper);
  --color-surface: var(--color-ivory);
  --color-surface-alt: #eee3d1;
  --color-surface-card: var(--color-white);
  --color-surface-form: #fffbf3;
  --color-surface-legal: #fffbf3;
  --color-surface-highlight: var(--color-sand);
  --color-surface-dark: var(--color-deep-teal);
  --color-surface-feature: #a64b2e;
  --color-text: var(--color-ink);
  --color-text-muted: #60513f;
  --color-text-on-dark: #d9e4dc;
  --color-text-on-feature: #ffe0b2;
  --color-text-on-footer: #bcb5ab;
  --color-accent: var(--color-terracotta);
  --color-accent-on-dark: var(--color-apricot);
  --color-action: var(--color-terracotta);
  --color-on-action: var(--color-white);
  --color-border: #d3c1a8;
  --color-border-input: #867461;
  --color-border-footer: #4c4945;
  --color-notice: #e7cda5;
  --color-overlay: rgba(25, 63, 59, .8);
  --color-trace: #f3c476;
  --color-trace-light: #fff0bd;
}