:root {
  /* Colors from original app */
  --background: 220 13% 98%;
  --foreground: 220 39% 11%;
  --card: 0 0% 100%;
  --card-foreground: 220 39% 11%;
  --primary: 160 84% 39%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 215 25% 27%;
  --secondary-light: 210 40% 100%;
  --muted: 216 50% 98%;
  --muted-foreground: 215 16% 47%;
  --red: 0 84% 60%;
  --red-foreground: 0 0% 100%;
  --border: 220 13% 91%;
  --green: 160 84% 39%;
  --green-foreground: 0 0% 100%;
  --yellow: 38 92% 50%;
  --yellow-foreground: 0 0% 100%;
  --orange: 25 88% 55%;
  --blue: 221 83% 53%;
  --blue-foreground: 0 0% 100%;
  --blue-light: 214 95% 93%;
  --keyper-blue: 221 55% 56%;
  --keyper-purple: 279 49% 31%;
  
  /* Workflow sidebar gradient (critical for sidebar styling) */
  --workflow-gradient-start: 223 46% 55%;
  --workflow-gradient-end: 289 56% 32%;
  --workflow-gradient: linear-gradient(to bottom, hsl(var(--workflow-gradient-start)), hsl(var(--workflow-gradient-end)));
  
  /* Spacing system */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-ml: 1.25rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-3xl: 4rem;
  
  /* Typography */
  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Icons */
  --icon-size-xs: 1rem;
  --icon-size-sm: 1.25rem;
  --icon-size-md: 2rem;
  --icon-size-lg: 2.5rem;
  --icon-size-xl: 3rem;
  --icon-size-2xl: 4.5rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-medium: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}