Headless Design Systems

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-secondary: #8b5cf6;
  --color-accent: #06b6d4;

  --radius-md: 6px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --space-4: 1rem;
  --space-6: 1.5rem;
}

export function Button({ variant, children }) {
  return (
    <button
      className={styles[variant]}
      // Radix handles: focus, keyboard,
      // aria-*, disabled state
    >
      {children}
    </button>
  );
}

// Tokens consumed via CSS Modules
// Zero hardcoded values