@layer tokens {
  :root {
    --vwc-navy-deep: oklch(0.18 0.04 250);
    --vwc-navy-dark: oklch(0.22 0.05 250);
    --vwc-navy-base: oklch(0.28 0.06 250);

    --vwc-green-bright: oklch(0.68 0.2 145);
    --vwc-green-vivid: oklch(0.62 0.22 142);
    --vwc-green-deep: oklch(0.45 0.18 140);

    --vwc-white: oklch(0.99 0 0);
    --vwc-off-white: oklch(0.96 0.01 90);
    --vwc-gray-light: oklch(0.85 0.01 250);
    --vwc-gray-mid: oklch(0.6 0.02 250);
    --vwc-gray-dark: oklch(0.4 0.03 250);

    --vwc-gold: oklch(0.75 0.15 85);

    --vwc-bg-primary: var(--vwc-navy-deep);
    --vwc-bg-secondary: var(--vwc-navy-dark);
    --vwc-bg-elevated: var(--vwc-navy-base);

    --vwc-text-primary: var(--vwc-off-white);
    --vwc-text-secondary: var(--vwc-gray-light);
    --vwc-text-muted: var(--vwc-gray-mid);

    --vwc-accent-primary: var(--vwc-green-bright);
    --vwc-accent-hover: var(--vwc-green-vivid);
    --vwc-accent-active: var(--vwc-green-deep);

    --vwc-border-subtle: oklch(0.35 0.04 250);
    --vwc-border-default: oklch(0.45 0.05 250);

    --vwc-success: var(--vwc-green-bright);
    --vwc-warning: var(--vwc-gold);
    --vwc-error: oklch(0.6 0.22 25);

    --radius: 0.5rem;
  }
}