:root {
  /* Surfaces */
  --color-bg: #050506;
  --color-bg-gradient: radial-gradient(120% 80% at 50% -10%, #0e0e12 0%, #050506 60%);
  --color-surface: #0b0b0d;
  --color-card: #141418;
  --color-card-dim: #111114;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --color-text: #f3f3f0;
  --color-text-muted: #8b8b93;
  --color-text-dim: #6a6a72;
  --color-text-faint: #5c5c63;

  /* Accent (brand) */
  --color-accent: #ccff33;
  --color-accent-hover: #dbff6a;
  --color-accent-bg: rgba(204, 255, 51, 0.07);
  --color-accent-bg-strong: rgba(204, 255, 51, 0.1);
  --color-on-accent: #0a0a0b;

  /* Semantic */
  --color-danger: #ff6b5e;
  --color-danger-text: #ff8a7d;
  --color-danger-bg: rgba(255, 107, 94, 0.12);
  --color-warning-text: #ff9b6b;
  --color-warning-bg: rgba(255, 138, 90, 0.1);
  --color-warning-border: rgba(255, 138, 90, 0.25);

  /* Typography */
  --font-heading: "Space Grotesk", sans-serif;
  --font-mono: "Space Mono", monospace;

  /* Radius */
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --radius-xs: 7px;

  /* Spacing */
  --space-page-x: 20px;
}