:root {
  /* Base — six meanings plus structure. Color is never decorative. */
  --graphite: #121212;   /* text, structure — warm near-black, never pure black */
  --bone: #F2ECDE;       /* primary background, warm paper */
  --clay: #E8DFCE;       /* supporting surfaces, cards, containers */
  --ember: #FF3B18;      /* judgment, authority, activation, consequence */
  --moss: #5E6B4C;       /* learning, growth, return paths */
  --slate: #5C6670;      /* signal, inputs, infrastructure, secondary info */
  --hairline: #D6CBB4;   /* structural borders */

  /* Derived warm neutrals — depth ladder, not new colors */
  --paper: #FAF6EC;      /* full-bleed ground — lightest, above Bone */
  --clay-deep: #DED3BE;
  --clay-deeper: #D2C6AE;
  --bone-raised: #F7F2E6;

  /* Derived states — only ember, moss and slate ever shift */
  --ember-hover: #F02D0B;
  --ember-press: #D42408;
  --ember-quiet: rgba(255, 59, 24, 0.10);
  --moss-quiet: rgba(94, 107, 76, 0.12);
  --slate-quiet: rgba(92, 102, 112, 0.10);
  --graphite-quiet: rgba(18, 18, 18, 0.06);

  /* Semantic aliases — compose from these, not the base tokens */
  --text-primary: var(--graphite);
  --text-secondary: var(--slate);
  --text-muted: rgba(18, 18, 18, 0.52);
  --text-inverse: var(--bone);
  --text-judgment: var(--ember);
  --text-learning: var(--moss);

  --surface-page: var(--paper);
  --surface-card: var(--clay);
  --surface-sunken: var(--clay-deep);
  --surface-raised: var(--bone);
  --surface-inverse: var(--graphite);

  --border-hairline: var(--hairline);
  --border-strong: rgba(18, 18, 18, 0.22);
  --border-judgment: var(--ember);

  --signal-enter: var(--slate);      /* 1 · signal enters */
  --signal-structure: var(--graphite); /* 2 · graphite organizes */
  --signal-judgment: var(--ember);   /* 3 · ember resolves */
  --signal-return: var(--moss);      /* 4 · moss returns as learning */
}

/* Inverse scope — used sparingly, e.g. a single graphite statement panel. */
.r8-inverse {
  --text-primary: var(--bone);
  --text-secondary: rgba(242, 236, 222, 0.62);
  --text-muted: rgba(242, 236, 222, 0.44);
  --surface-page: var(--graphite);
  --surface-card: #1C1C1B;
  --surface-sunken: #0C0C0C;
  --border-hairline: rgba(242, 236, 222, 0.18);
}