:root {
  /* Base */
  --iron: #16191D;
  --iron-hover: #2E3439;
  --pine: #3D5C58;
  --pine-deep: #2A4441;
  --clay: #9D6242;
  --slate: #565E5C;
  --stone: #767C78;
  --rule: #DDE0DB;
  --field: #E4E6E1;
  --paper: #F5F6F3;
  --white: #FFFFFF;
  --disabled-text: #8E938F;

  /* Semantic — text */
  --text-primary: var(--iron);
  --text-secondary: var(--slate);
  --text-label: var(--stone);
  --text-accent: var(--pine);
  --text-flag: var(--clay);
  --text-inverse: var(--paper);

  /* Semantic — surface */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-band: var(--field);
  --surface-inverse: var(--iron);
  --surface-accent: var(--pine);

  /* Semantic — line */
  --line-hairline: var(--rule);
  --line-section: var(--iron);
  --line-accent: var(--pine);
  --line-masthead: var(--iron);

  /* Semantic — state */
  --state-hover-accent: var(--pine-deep);
  --state-hover-ink: var(--iron-hover);
  --state-focus: var(--pine);
  --state-error: var(--clay);
  --state-disabled-bg: var(--rule);
  --state-disabled-fg: var(--disabled-text);
}