:root {
  color-scheme: light;
  --brand-purple: #4b00b9;
  --brand-purple-strong: #360082;
  --brand-purple-soft: #7a2cff;
  --brand-yellow: #ffd34f;
  --brand-black: #070707;

  --canvas: #f4f2f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f0edf5;
  --surface-strong: #e7e1ef;
  --nav-surface: color-mix(in srgb, var(--surface) 96%, transparent);
  --nav-shadow: 6px 8px 22px rgba(42,22,61,.12), -4px -4px 12px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.9);
  --ink: #121016;
  --text: #342f3b;
  --muted: #6e6876;
  --faint: #716a78;
  --line: rgba(34, 22, 45, .12);
  --line-strong: rgba(34, 22, 45, .24);
  --shadow: 0 24px 70px rgba(42, 22, 61, .13);
  --shadow-soft: 0 10px 28px rgba(42, 22, 61, .08);

  --success: #17854a;
  --warning: #a66b00;
  --danger: #bc3140;

  --radius-xs: 8px;
  --radius-sm: 16px;
  --radius-md: 28px;
  --radius-lg: 32px;
  --radius-control: var(--radius-sm);
  --radius-field: var(--radius-sm);
  --radius-action: var(--radius-pill);
  --radius-thumbnail: var(--radius-xs);
  --radius-panel: var(--radius-md);
  --radius-dialog: var(--radius-lg);
  --radius-compact: 36px;
  --radius-pill: 999px;
  --container: 1360px;
  --focus-ring: #4b00b9;
}

html.dark {
  --focus-ring: #ffd34f;
  color-scheme: dark;
  --canvas: #070707;
  --surface: #0d0d0f;
  --surface-raised: #121115;
  --surface-subtle: #17161b;
  --surface-strong: #201e25;
  --nav-surface: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  --nav-shadow: 8px 12px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.055);
  --ink: #f7f3fb;
  --text: #d7d1dd;
  --muted: #99919f;
  --faint: #81798a;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .20);
  --shadow: 0 30px 90px rgba(0, 0, 0, .48);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, .28);
  --success: #58d68d;
  --warning: #ffd34f;
  --danger: #ff7985;
}