:root {
  --color-primary: #C8FF3D;
  --color-primary-hover: #B4EA28;
  --color-secondary: #1A2117;
  --color-secondary-hover: #0F1410;
  --color-accent: #C8FF3D;
  --color-accent-hover: #B4EA28;
  --color-text: #F5F5F0;
  --color-text-muted: #9BA499;
  --color-surface: #222B1F;
  --color-background: #141A12;
  --color-border: #2C3528;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

/* Custom CSS for Kitchen Kick Off
 * Add your custom styles here.
 * Theme tokens are available as CSS variables within .wpc-theme-kitchen_kickoff scope:
 *   - var(--color-primary), var(--color-secondary), var(--color-text), etc.
 *   - var(--font-heading), var(--font-body)
 *   - var(--space-sm), var(--space-md), var(--space-lg), etc.
 *   - var(--radius-sm), var(--radius-md), var(--radius-lg)
 * Use the short format above — they resolve inside the theme scope automatically.
 */