:root {
  --ds-colour-ink: #24211c;
  --ds-colour-muted: #6d665b;
  --ds-colour-page: #f7f7f4;
  --ds-colour-surface: #fffefa;
  --ds-colour-surface-white: #ffffff;
  --ds-colour-warm-panel: #efeee8;
  --ds-colour-contextual-warm: #f7f4ec;
  --ds-colour-contextual-line: #918d83;
  --ds-colour-contextual-foreground: #4d534c;
  --ds-colour-line: #ded5c7;
  --ds-colour-line-soft: #ece4d7;
  --ds-colour-line-strong: #aaa295;
  --ds-colour-header: #1f2a24;
  --ds-colour-gold: #ffc000;
  --ds-colour-gold-hover: #e6ad00;
  --ds-colour-attention-foreground: #2d281f;
  --ds-colour-deep-green: #0e5f51;
  --ds-colour-progress-green: #20a990;
  --ds-colour-green-soft: #edf8f4;
  --ds-colour-success: var(--ds-colour-progress-green);
  --ds-colour-success-soft: var(--ds-colour-green-soft);
  --ds-colour-plum: #5f5068;
  --ds-colour-plum-soft: #fbf8fc;
  --ds-colour-roundel: #705f2a;
  --ds-colour-warning: #f7f1df;
  --ds-colour-warning-soft: #fff3cd;
  --ds-colour-warning-line: #d39e00;
  --ds-colour-warning-foreground: #8a5a00;
  --ds-colour-info-soft: #eef3f5;
  --ds-colour-info-line: #bdccd2;
  --ds-colour-info-ink: #315362;
  --ds-colour-destructive: #b42318;
  --ds-colour-destructive-hover: #84170f;
  --ds-colour-destructive-soft: #fae4df;
  --ds-colour-error-soft: #fce8e6;
  --ds-colour-focus-ring: rgba(14, 95, 81, 0.24);
  --ds-colour-scrim: rgba(36, 33, 28, 0.44);

  --ds-colour-ink-900: var(--ds-colour-ink);
  --ds-colour-ink-700: var(--ds-colour-muted);
  --ds-colour-ink-600: var(--ds-colour-muted);
  --ds-colour-ink-500: #8f887e;
  --ds-colour-paper-0: var(--ds-colour-surface);
  --ds-colour-paper-50: var(--ds-colour-page);
  --ds-colour-paper-100: var(--ds-colour-warm-panel);
  --ds-colour-paper-200: var(--ds-colour-line);
}

.ds-swatch {
  align-items: end;
  background: var(--ds-swatch-background, var(--ds-colour-paper-100));
  border: 1px solid var(--ds-colour-paper-200);
  border-radius: var(--ds-radius-md, 8px);
  color: var(--ds-swatch-foreground, var(--ds-colour-ink-900));
  display: flex;
  min-height: 96px;
  padding: var(--ds-space-4, 16px);
}

.ds-swatch .ds-type-caption {
  color: inherit;
}

.ds-swatch--ink {
  --ds-swatch-background: var(--ds-colour-ink);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}

.ds-swatch--page {
  --ds-swatch-background: var(--ds-colour-page);
}

.ds-swatch--surface {
  --ds-swatch-background: var(--ds-colour-surface);
}

.ds-swatch--warm-panel {
  --ds-swatch-background: var(--ds-colour-warm-panel);
}

.ds-swatch--line {
  --ds-swatch-background: var(--ds-colour-line);
}

.ds-swatch--gold {
  --ds-swatch-background: var(--ds-colour-gold);
}

.ds-swatch--deep-green {
  --ds-swatch-background: var(--ds-colour-deep-green);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}

.ds-swatch--progress-green {
  --ds-swatch-background: var(--ds-colour-progress-green);
}

.ds-swatch--success {
  --ds-swatch-background: var(--ds-colour-success);
}

.ds-swatch--success-soft {
  --ds-swatch-background: var(--ds-colour-success-soft);
}

.ds-swatch--plum {
  --ds-swatch-background: var(--ds-colour-plum);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}

.ds-swatch--info-soft {
  --ds-swatch-background: var(--ds-colour-info-soft);
}

.ds-swatch--info-line {
  --ds-swatch-background: var(--ds-colour-info-line);
}

.ds-swatch--info-ink {
  --ds-swatch-background: var(--ds-colour-info-ink);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}

.ds-swatch--destructive {
  --ds-swatch-background: var(--ds-colour-destructive);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}

.ds-swatch--destructive-hover {
  --ds-swatch-background: var(--ds-colour-destructive-hover);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}

.ds-swatch--destructive-soft {
  --ds-swatch-background: var(--ds-colour-destructive-soft);
}

.ds-swatch--scrim {
  --ds-swatch-background: var(--ds-colour-scrim);
  --ds-swatch-foreground: var(--ds-colour-surface-white);
}