:root[data-theme="green"] {
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;
  --brand-950: #022c22;

  --brand-50-rgb: 236 253 245;
  --brand-100-rgb: 209 250 229;
  --brand-200-rgb: 167 243 208;
  --brand-300-rgb: 110 231 183;
  --brand-400-rgb: 52 211 153;
  --brand-500-rgb: 16 185 129;
  --brand-600-rgb: 5 150 105;
  --brand-700-rgb: 4 120 87;
  --brand-800-rgb: 6 95 70;
  --brand-900-rgb: 6 78 59;
  --brand-950-rgb: 2 44 34;

  --primary: var(--brand-600);
  --primary-foreground: #ffffff;
  --secondary: var(--brand-50);
  --secondary-foreground: var(--brand-700);
  --accent: color-mix(in srgb, var(--brand-50) 88%, white);
  --accent-foreground: var(--brand-700);
  --ring: color-mix(in srgb, var(--brand-500) 70%, white);
  --sidebar-primary: var(--brand-700);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: color-mix(in srgb, var(--brand-50) 88%, white);
  --sidebar-accent-foreground: var(--brand-700);
  --sidebar-ring: var(--brand-500);
}

:root.dark[data-theme="green"] {
  --primary: var(--brand-400);
  --primary-foreground: #052e16;
  --secondary: color-mix(in srgb, var(--brand-950) 35%, black);
  --secondary-foreground: #ecfdf5;
  --accent: color-mix(in srgb, var(--brand-900) 55%, black);
  --accent-foreground: #ecfdf5;
  --ring: var(--brand-400);
  --sidebar-primary: var(--brand-400);
  --sidebar-primary-foreground: #052e16;
  --sidebar-accent: color-mix(in srgb, var(--brand-900) 55%, black);
  --sidebar-accent-foreground: #ecfdf5;
  --sidebar-ring: var(--brand-400);
}