:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --canvas: #0a0e14;
  --canvas-rgb: 10, 14, 20;
  --surface-1: #0f1216;
  --surface-2: #14171c;
  --surface-3: #1a1d24;

  /* Text */
  --ink: #f4f4f6;
  --ink-rgb: 244, 244, 246;
  --slate: #c7c9d9;
  --ink-subtle: #7d8190;

  /* Accent (unchanged from the existing site's indigo) */
  --indigo: #6366f1;
  --indigo-deep: #7b7ef5;
  --indigo-light: #1a1b2e;
  --on-primary: #ffffff;

  /* Borders */
  --border: #23262f;
  --border-strong: #34343a;

  /* Status */
  --success: #34d399;
  --success-light: #12261d;
  --error: #f87171;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 20px -6px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,0.55);
  --shadow-indigo: 0 12px 28px -8px rgba(99,102,241,0.45);
  --glow-indigo: 0 0 24px rgba(99,102,241,0.25);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}