/* Fitting · color tokens. Light theme only; names are by role so a dark theme can be added without renaming. */
:root {
  /* Base palette */
  --color-paper: #FDFBF7;
  --color-linen: #F1ECE2;
  --color-ink: #141414;
  --color-ink-hover: #302F2C;
  --color-ink-pressed: #000000;
  --color-graphite: #4D4A44;
  --color-hairline: #E8E3D9;
  --color-navy: #1F2E52;
  --color-good: #4F6B4A;
  --color-caution: #75591A;
  --color-problem: #9B3F36;

  /* Grounds · Paper and Linen carry about 70% of any screen */
  --ground-page: var(--color-paper);
  --ground-quiet: var(--color-linen);
  --ground-photo: var(--color-linen);
  --ground-inverse: var(--color-ink);
  --ground-action: var(--color-ink);
  --ground-action-hover: var(--color-ink-hover);
  --ground-action-pressed: var(--color-ink-pressed);
  --ground-secondary-hover: var(--color-linen);
  --ground-secondary-pressed: var(--color-hairline);
  --ground-chip: var(--color-linen);
  --ground-chip-hover: var(--color-hairline);
  --ground-chip-selected: var(--color-ink);
  --ground-bubble-member: var(--color-ink);
  --ground-bubble-sending: var(--color-graphite);
  --ground-disabled: var(--color-linen);
  --ground-toast: var(--color-ink);
  --ground-scrim: rgba(20, 20, 20, 0.4);
  --ground-skeleton: var(--color-linen);
  --ground-skeleton-highlight: var(--color-paper);

  /* Text · every pair below passes WCAG 2.2 AA (see Foundations) */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-graphite);
  --text-placeholder: var(--color-graphite);
  --text-inverse: var(--color-paper);
  --text-link: var(--color-navy);
  --text-good: var(--color-good);
  --text-caution: var(--color-caution);
  --text-problem: var(--color-problem);
  --text-disabled: var(--color-graphite);

  /* Lines · always 1px */
  --line-hairline: var(--color-hairline);
  --line-emphasis: var(--color-ink);
  --line-input: var(--color-hairline);
  --line-input-focus: var(--color-ink);
  --line-problem: var(--color-problem);
  --line-focus: var(--color-navy);

  /* Icons · one color, stroke only */
  --icon-default: var(--color-ink);
  --icon-inactive: var(--color-graphite);
  --icon-inverse: var(--color-paper);
}