:root {
  /* house base */
  --va-purple: #141026;
  --va-purple-deep: #0F0C1C;
  --va-purple-card: #1E1836;
  --va-ember: #FF7A2F;
  --va-ember-ink: #141026;
  --va-bone: #E8E4DC;
  --va-bone-light: #FAF8F4;
  --va-bone-card: #EFEAE1;
  --va-bone-deep: #E2DDD3;
  --va-steel: #5B7FA6;
  --va-steel-light: #8FB0CC;

  /* semantic — dark theme is the default ground */
  --surface-page: var(--va-purple);
  --surface-card: var(--va-purple-card);
  --surface-footer: var(--va-purple-deep);
  --text-body: var(--va-bone);
  --text-dim: #C6C2BA;
  --text-mute: #8E8A82;
  --text-link: var(--va-steel-light);
  --line-hairline: rgba(232, 228, 220, .14);
  --line-pill: rgba(232, 228, 220, .5);
  --action-bg: var(--va-ember);
  --action-text: var(--va-ember-ink);
}

[data-theme="light"] {
  /* Bone is the page ground; paper is the card ground above it. */
  --surface-page: var(--va-bone);
  --surface-card: var(--va-bone-light);
  --surface-footer: var(--va-bone-deep);
  --text-body: var(--va-purple);
  --text-dim: #4A4560;
  --text-mute: #5F5A70;
  --text-link: var(--va-steel);
  --line-hairline: rgba(20, 16, 38, .14);
  --line-pill: rgba(20, 16, 38, .35);
}