:root {
  --font-sans: "inter", system-ui, sans-serif;
  --font-serif: serif;
  --font-mono: "JetBrainsMono", monospace;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --spacing: 0.25rem;
  /* 1 = 0.25rem = 4px */
  /* 2 = 0.5rem = 8px - mb */ 
  /* 4 = 1rem = 16px */
  /* 6 = 1.5rem = 24px */
  /* 8 = 2rem = 32px */
  /* 12 = 3rem = 48px */
  /* 16 = 4rem = 64px */

  /* Dark mode shadow  */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);

  --z-hide: -1;
  --z-base: 0;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  --primary-50: oklch(98.7% 0.026 102.212);
  --primary-100: oklch(97.3% 0.071 103.193);
  --primary-200: oklch(94.5% 0.129 101.54);
  --primary-300: oklch(90.5% 0.182 98.111);
  --primary-400: oklch(85.2% 0.199 91.936);
  --primary-500: oklch(79.5% 0.184 86.047);
  --primary-600: oklch(68.1% 0.162 75.834);
  --primary-700: oklch(55.4% 0.135 66.442);
  --primary-800: oklch(47.6% 0.114 61.907);
  --primary-900: oklch(42.1% 0.095 57.708);
  --primary-950: oklch(28.6% 0.066 53.813);

  --neutral-50: oklch(98.5% 0 0); /* background, card, popover, primary-fg, sidebar */
  --neutral-100: oklch(96.7% 0.001 286.375); /* secondary, muted, accent, sidebar-accent */
  --neutral-200: oklch(92% 0.004 286.32); /* border, input, sidebar-border */
  --neutral-300: oklch(87.1% 0.006 286.286); /* ring, sidebar-ring */
  --neutral-400: oklch(70.5% 0.015 286.067);
  --neutral-500: oklch(55.2% 0.016 285.938); /* muted-foreground */
  --neutral-600: oklch(44.2% 0.017 285.786);
  --neutral-700: oklch(37% 0.013 285.805);
  --neutral-800: oklch(27.4% 0.006 286.033);
  --neutral-900: oklch(21% 0.006 285.885); /* primary, secondary-fg, accent-fg, sidebar-primary, sidebar-accent-foreground */
  --neutral-950: oklch(14.1% 0.005 285.823); /* foregound, card-fg, popover-fg, sidebar-fg */

  /* --background: oklch(1 0 0); // 1 */
  /* --foreground: oklch(0.145 0 0); // 2 */
  /* --card: oklch(1 0 0); // 1 */
  /* --card-foreground: oklch(0.145 0 0); // 2 */
  /* --popover: oklch(1 0 0); // 1 */
  /* --popover-foreground: oklch(0.145 0 0); // 2 */
  /* --primary: oklch(0.205 0 0); // 3 */
  /* --primary-foreground: oklch(0.985 0 0); // 4 */
  /* --secondary: oklch(0.97 0 0); // 5 */
  /* --secondary-foreground: oklch(0.205 0 0); // 3 */
  /* --muted: oklch(0.97 0 0); // 5 */
  /* --muted-foreground: oklch(0.556 0 0); // 6 */
  /* --accent: oklch(0.97 0 0); // 5 */
  /* --accent-foreground: oklch(0.205 0 0); // 3 */
  /* --destructive: oklch(0.577 0.245 27.325); */
  /* --border: oklch(0.922 0 0); // 7 */
  /* --input: oklch(0.922 0 0); // 7 */
  /* --ring: oklch(0.708 0 0); // 8 */
  /* --sidebar: oklch(0.985 0 0); // 4 */
  /* --sidebar-foreground: oklch(0.145 0 0); // 2 */
  /* --sidebar-primary: oklch(0.205 0 0); // 3 */
  /* --sidebar-primary-foreground: oklch(0.985 0 0); // 4 */
  /* --sidebar-accent: oklch(0.97 0 0); // 5 */
  /* --sidebar-accent-foreground: oklch(0.205 0 0); // 3 */
  /* --sidebar-border: oklch(0.922 0 0); // 7 */
  /* --sidebar-ring: oklch(0.708 0 0); // 8 */
}

.dark {
  --neutral-50: oklch(14.1% 0.005 285.823);
  --neutral-100: oklch(21% 0.006 285.885);
  --neutral-200: oklch(27.4% 0.006 286.033);
  --neutral-300: oklch(37% 0.013 285.805);
  --neutral-400: oklch(44.2% 0.017 285.786);
  --neutral-500: oklch(55.2% 0.016 285.938);
  --neutral-600: oklch(70.5% 0.015 286.067);
  --neutral-700: oklch(87.1% 0.006 286.286);
  --neutral-800: oklch(92% 0.004 286.32);
  --neutral-900: oklch(96.7% 0.001 286.375);
  --neutral-950: oklch(98.5% 0 0);
}

/* Use vite/ESModules to reduce bundle size, lucide is built to be fully tree-shakable */
/* [data-lucide] */
.lucide {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1px;
  stroke: currentColor;
}

.ph,
[class^="ph-"],
[class*=" ph-"] {
  width: 1em;
  height: 1em;
  fill: currentColor;
}