:root{
  /* Base palette */
  --color-vivid-green:#22c55e;
  --color-white:#ffffff;
  --color-near-black:#171717;
  --color-light-gray-border:#e6e6e6;
  --color-muted-gray:#d4d4d4;

  /* Extended greens (derived via oklch for hover/press + tints) */
  --color-green-700:#16a34a;
  --color-green-600:#1eae53;
  --color-green-50:#eafaf0;

  /* Neutral ramp (derived) */
  --color-gray-500:#737373;
  --color-gray-400:#a3a3a3;
  --color-gray-100:#f5f5f5;

  /* Semantic aliases */
  --text-primary:var(--color-near-black);
  --text-muted:var(--color-gray-500);
  --text-on-accent:var(--color-white);

  --surface-page:var(--color-white);
  --surface-card:var(--color-white);
  --surface-subtle:var(--color-gray-100);
  --surface-accent:var(--color-vivid-green);
  --surface-accent-hover:var(--color-green-700);
  --surface-inverse:var(--color-near-black);

  --border-default:var(--color-light-gray-border);
  --border-strong:var(--color-muted-gray);

  --accent:var(--color-vivid-green);
  --accent-hover:var(--color-green-700);
}