:root {
  --background: #f9fafb;
  --foreground: #1f1f1f;
  --card: #ffffff;
  --card-foreground: #1f1f1f;
  --popover: #ffffff;
  --popover-foreground: #1f1f1f;
  --primary: rgba(101, 187, 40, 1);
  --primary-foreground: #ffffff;
  --secondary: #e5e7eb;
  --secondary-foreground: #111113;
  --muted: #f9fafb;
  --muted-foreground: #6b7280;
  --accent: rgba(218, 235, 215, 1);
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: rgba(200, 219, 6, 1);
  --radius: 0.5rem;
}

.dark {
  --background: #262626;
  --foreground: #fafafa;
  --card: #2d2d2d;
  --card-foreground: #fafafa;
  --popover: #2d2d2d;
  --popover-foreground: #fafafa;
  --primary: rgba(101, 187, 40, 1);
  --primary-foreground: #ffffff;
  --secondary: #212225;
  --secondary-foreground: #e5e7eb;
  --muted: #404040;
  --muted-foreground: #a3a3a3;
  --accent: #2d2d2d;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #404040;
  --input: #3a3a3a;
  --ring: rgba(200, 219, 6, 1);
}

.radix-themes {
  /* brand base */
  --brand: var(--primary);

  /* light scale */
  --accent-1: color-mix(in srgb, var(--brand) 4%, white);
  --accent-2: color-mix(in srgb, var(--brand) 8%, white);
  --accent-3: color-mix(in srgb, var(--brand) 14%, white);
  --accent-4: color-mix(in srgb, var(--brand) 20%, white);
  --accent-5: color-mix(in srgb, var(--brand) 28%, white);
  --accent-6: color-mix(in srgb, var(--brand) 36%, white);
  --accent-7: color-mix(in srgb, var(--brand) 48%, white);
  --accent-8: color-mix(in srgb, var(--brand) 64%, white);
  --accent-9: var(--brand);
  --accent-10: color-mix(in srgb, var(--brand) 88%, black);
  --accent-11: color-mix(in srgb, var(--brand) 72%, black);
  --accent-12: color-mix(in srgb, var(--brand) 52%, black);

  --accent-a1: color-mix(in srgb, var(--brand) 6%, transparent);
  --accent-a2: color-mix(in srgb, var(--brand) 10%, transparent);
  --accent-a3: color-mix(in srgb, var(--brand) 16%, transparent);
  --accent-a4: color-mix(in srgb, var(--brand) 22%, transparent);
  --accent-a5: color-mix(in srgb, var(--brand) 30%, transparent);
  --accent-a6: color-mix(in srgb, var(--brand) 38%, transparent);
  --accent-a7: color-mix(in srgb, var(--brand) 50%, transparent);
  --accent-a8: color-mix(in srgb, var(--brand) 66%, transparent);
  --accent-a9: color-mix(in srgb, var(--brand) 100%, transparent);
  --accent-a10: color-mix(in srgb, var(--brand) 90%, transparent);
  --accent-a11: color-mix(in srgb, var(--brand) 100%, transparent);
  --accent-a12: color-mix(in srgb, var(--brand) 58%, transparent);

  --accent-contrast: #ffffff;
  --accent-surface: var(--accent-a3);
  --accent-indicator: var(--accent-9);
  --accent-track: var(--accent-9);
}

.dark .radix-themes {
  /* dark scale */
  --accent-1: color-mix(in srgb, var(--brand) 6%, black);
  --accent-2: color-mix(in srgb, var(--brand) 10%, black);
  --accent-3: color-mix(in srgb, var(--brand) 16%, black);
  --accent-4: color-mix(in srgb, var(--brand) 22%, black);
  --accent-5: color-mix(in srgb, var(--brand) 30%, black);
  --accent-6: color-mix(in srgb, var(--brand) 38%, black);
  --accent-7: color-mix(in srgb, var(--brand) 50%, black);
  --accent-8: color-mix(in srgb, var(--brand) 64%, black);
  --accent-9: var(--brand);
  --accent-10: color-mix(in srgb, var(--brand) 88%, white);
  --accent-11: color-mix(in srgb, var(--brand) 78%, white);
  --accent-12: color-mix(in srgb, var(--brand) 62%, white);

  --accent-a1: color-mix(in srgb, var(--brand) 10%, transparent);
  --accent-a2: color-mix(in srgb, var(--brand) 14%, transparent);
  --accent-a3: color-mix(in srgb, var(--brand) 20%, transparent);
  --accent-a4: color-mix(in srgb, var(--brand) 26%, transparent);
  --accent-a5: color-mix(in srgb, var(--brand) 34%, transparent);
  --accent-a6: color-mix(in srgb, var(--brand) 42%, transparent);
  --accent-a7: color-mix(in srgb, var(--brand) 54%, transparent);
  --accent-a8: color-mix(in srgb, var(--brand) 68%, transparent);
  --accent-a9: color-mix(in srgb, var(--brand) 100%, transparent);
  --accent-a10: color-mix(in srgb, var(--brand) 92%, transparent);
  --accent-a11: color-mix(in srgb, var(--brand) 100%, transparent);
  --accent-a12: color-mix(in srgb, var(--brand) 66%, transparent);

  --accent-contrast: #ffffff;
  --accent-surface: var(--accent-a3);
  --accent-indicator: var(--accent-9);
  --accent-track: var(--accent-9);
}