/* Semantic, not literal */
--color-primary: 223 75% 45%;      /* Brand blue */
--color-primary-muted: 223 75% 65%;
--color-secondary: 30 75% 55%;     /* Accent orange */
--color-neutral: 0 0% 100%;        /* White */
--color-neutral-muted: 0 0% 95%;   /* Off-white */
--color-neutral-dark: 0 0% 10%;    /* Dark gray */
--color-danger: 0 84% 60%;         /* Red */
--color-success: 142 75% 45%;      /* Green */
--color-warning: 45 90% 55%;       /* Yellow */

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  --color-neutral: 0 0% 12%;
  --color-neutral-muted: 0 0% 20%;
}

--space-xs: 0.25rem;  /* 4px  */
--space-sm: 0.5rem;   /* 8px  */
--space-md: 1rem;     /* 16px */
--space-lg: 1.5rem;   /* 24px */
--space-xl: 2rem;     /* 32px */
--space-2xl: 3rem;    /* 48px */

--font-family-base: 'Inter', -apple-system, sans-serif;
--font-size-xs: 0.75rem;  /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem;   /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem;  /* 20px */
--font-size-2xl: 1.5rem;  /* 24px */
--font-size-3xl: 2rem;    /* 32px */
--font-size-4xl: 3rem;    /* 48px */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-loose: 1.7;

--radius-sm: 0.375rem;    /* 6px  */
--radius-md: 0.5rem;      /* 8px  */
--radius-lg: 0.75rem;     /* 12px */
--radius-xl: 1rem;        /* 16px */
--radius-2xl: 1.5rem;     /* 24px */
--radius-full: 9999px;    /* Pill */

// Button.jsx - 6 variants, 4 sizes, loading states
const Button = ({ 
  variant = 'primary',
  size = 'md', 
  loading = false,
  children,
  ...props
}) => {
  const base = 'inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-4';
  
  const variants = {
    primary: 'bg-primary text-neutral hover:bg-primary/90 active:bg-primary/80 shadow-lg shadow-primary/25',
    secondary: 'bg-neutral text-neutral-dark hover:bg-neutral-muted border border-neutral-muted/50',
    danger: 'bg-danger text-neutral hover:bg-danger/90',
    ghost: 'hover:bg-neutral-muted/50 active:bg-neutral-muted',
    outline: 'border-2 border-neutral-muted hover:bg-neutral-muted/50'
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-xs rounded-md h-9',
    md: 'px-4 py-2 text-sm rounded-lg h-10',
    lg: 'px-6 py-3 text-base rounded-xl h-12',
    xl: 'px-8 py-4 text-lg rounded-2xl h-16'
  };
  
  return (
    <button 
      className={`${base} ${variants[variant]} ${sizes[size]} ${loading ? 'opacity-75 cursor-not-allowed' : ''}`}
      disabled={loading}
      {...props}
    >
      {loading ? (
        <svg className="animate-spin w-4 h-4 mr-2" />
      ) : null}
      {children}
    </button>
  );
};

// Card.jsx - Glassmorphism-ready, hover states
const Card = ({ children, hoverEffect = true, className = '' }) => (
  <div className={`
    bg-neutral/80 backdrop-blur-sm border border-neutral-muted/50 
    rounded-xl shadow-lg hover:shadow-xl transition-all duration-300
    hover:-translate-y-1 ${hoverEffect ? 'hover:shadow-primary/10' : ''}
    ${className}
  `}>
    {children}
  </div>
);

├── design-tokens.css      # Complete token system
├── components/            # Atomic components
│   ├── Button.jsx
│   ├── Card.jsx
│   └── index.js
├── theme-provider.jsx     # Theme wrapper
└── README.md             # Component docs + Figma file