:root {
  color-scheme: light;

  /* Stable visual contract. Legacy aliases remain until all screens migrate. */
  --color-canvas: #f7f5ef;
  --color-surface: #fffefb;
  --color-surface-soft: #f0f3ee;
  --color-paper: #fffdfa;
  --color-text: #242824;
  --color-text-muted: #6f756f;
  --color-border: #dedbd0;
  --color-border-strong: #c7c2b4;
  --color-focus-ring: #206f62;
  --elevation-dialog: 0 14px 34px rgba(45, 43, 35, 0.09);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  --layer-content: 1;
  --layer-sticky: 20;
  --layer-sheet: 30;
  --layer-dialog: 10000;

  --emotion-joy: #d99b2b;
  --emotion-peace: #3f9a8a;
  --emotion-hope: #5a9d4a;
  --emotion-awe: #7666b2;
  --emotion-conviction: #bf5b70;
  --emotion-confusion: #567da6;
  --emotion-sorrow: #69727f;
  --emotion-anger: #c64f43;

  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);
  --paper: var(--color-paper);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --shadow: var(--elevation-dialog);
  --radius: var(--radius-md);
  --joy: var(--emotion-joy);
  --peace: var(--emotion-peace);
  --hope: var(--emotion-hope);
  --awe: var(--emotion-awe);
  --conviction: var(--emotion-conviction);
  --confusion: var(--emotion-confusion);
  --sorrow: var(--emotion-sorrow);
  --anger: var(--emotion-anger);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #111714;
  --color-surface: #1b231f;
  --color-surface-soft: #26302b;
  --color-paper: #171e1b;
  --color-text: #edf3ef;
  --color-text-muted: #aeb9b3;
  --color-border: #3b4841;
  --color-border-strong: #607067;
  --color-focus-ring: #86d4c4;
  --elevation-dialog: 0 18px 46px rgba(0, 0, 0, 0.34);
}

/* New screens use this boundary until the existing UI has fully migrated. */
:where([data-bf-surface]) {
  background: var(--color-surface);
  color: var(--color-text);
}