:root {
  /* Primitive colors */
  --ink-950: #081017;
  --ink-900: #0d161e;
  --ink-850: #111b24;
  --ink-800: #17232d;
  --ink-700: #23323c;
  --paper-50: #fbf7ed;
  --paper-100: #f1ead9;
  --paper-200: #ded2b8;
  --paper-400: #ab9d80;
  --gold-300: #e1c47f;
  --gold-400: #d1ad5f;
  --gold-500: #b98b3f;
  --teal-400: #4f8c84;
  --teal-500: #2e6f68;
  --teal-600: #245b57;
  --red-400: #d46d66;
  --red-500: #b94f4a;
  --amber-400: #dda84a;
  --green-400: #66a47a;

  /* Primitive sizes */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --shadow-sm: 0 4px 14px rgb(0 0 0 / 0.18);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.36);
  --duration-fast: 150ms;
  --duration-normal: 260ms;

  /* Semantic tokens */
  --color-bg: var(--ink-950);
  --color-surface: var(--ink-850);
  --color-surface-raised: var(--ink-800);
  --color-surface-soft: rgb(255 255 255 / 0.045);
  --color-border: rgb(225 196 127 / 0.24);
  --color-border-strong: rgb(225 196 127 / 0.52);
  --color-text: var(--paper-50);
  --color-text-soft: var(--paper-200);
  --color-text-muted: var(--paper-400);
  --color-primary: var(--gold-300);
  --color-primary-strong: var(--gold-400);
  --color-accent: var(--teal-400);
  --color-accent-strong: var(--teal-500);
  --color-danger: var(--red-400);
  --color-warning: var(--amber-400);
  --color-success: var(--green-400);
  --color-focus: var(--gold-300);

  /* Component tokens */
  --button-bg: var(--color-primary);
  --button-fg: var(--ink-950);
  --button-hover-bg: var(--paper-100);
  --button-radius: var(--radius-md);
  --button-height: 3rem;
  --card-bg: linear-gradient(145deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --word-bg: rgb(79 140 132 / 0.18);
  --word-border: rgb(79 140 132 / 0.46);
}