:root {
  /* Brand colors */
  /* Cypress Green branding */
  --color-primary: #3b7a57;
  --color-primary-hover: #2f6246;
  --color-primary-active: #244d38;
  --color-primary-contrast: #ffffff;
  --color-primary-rgb: 59, 122, 87;
  --color-primary-soft: rgba(var(--color-primary-rgb), 0.08);
  --color-primary-border: rgba(var(--color-primary-rgb), 0.18);
  --color-primary-border-strong: rgba(var(--color-primary-rgb), 0.5);
  --color-primary-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --color-primary-gradient-hover: linear-gradient(135deg, #4c8f67 0%, var(--color-primary) 100%);
  --color-primary-gradient-active: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%);
  --color-bg: #0b0c0f;
  --color-surface: #ffffff;
  --color-text: #1d1d1f;
  --color-text-muted: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(var(--color-primary-rgb), 0.55);

  /* Semantic states */
  --color-success: #34c759;
  --color-warning: #ff9500;
  --color-danger: #ff3b30;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radii */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-round: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-size-base: 16px;

  /* Slate text scale (for existing UI shades) */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --border-neutral: rgba(0, 0, 0, 0.12);
}

/* Optional dark theme override scaffold */
.theme-dark {
  --color-bg: #0b0c0f;
  --color-surface: #111214;
  --color-text: #e5e7eb;
  --color-text-muted: rgba(255, 255, 255, 0.7);
}