@theme {
  /* CUSTOM PRIMARY BRAND COLORS */
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;
  --color-primary-950: #7a2813;

  --font-sans:
    "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-body:
    "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace";

  /* TEXT VARIABLES */
  --text-2xs: 0.625rem;
  --spacing-8xl: 90rem;
  --leading-9: 2.25rem;
  --leading-7: 1.75rem;
  --leading-8: 2rem;
  --leading-6: 1.5rem;
  --leading-4: 1rem;
  --leading-none: 0.0625rem;
  --leading-5: 1.25rem;
  --tracking-tighter: -0.05rem;
  --leading-heading-none: 3.75rem;
  --tracking-tight: -0.025rem;

  /* BORDER RADIUS VARIABLES */
  --radius-0: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-base: 12px;
  --radius-lg: 16px;

  /* BORDER WIDTH VARIABLES */
  --default-border-width: 1px;

  /* TEXT COLORS VARIABLES */
  /* main text color */
  --color-body: var(--color-gray-600);
  --color-body-subtle: var(--color-gray-500);

  /* text heading colors */
  --color-heading: var(--color-gray-900);

  /* used for custom brand colors */
  --color-fg-brand-subtle: var(--color-primary-200);
  --color-fg-brand: var(--color-primary-700);
  --color-fg-brand-strong: var(--color-primary-900);

  /* used for status colors */
  --color-fg-success: var(--color-emerald-700);
  --color-fg-success-strong: var(--color-emerald-900);
  --color-fg-danger: var(--color-rose-700);
  --color-fg-danger-strong: var(--color-rose-900);
  --color-fg-warning-subtle: var(--color-orange-600);
  --color-fg-warning: var(--color-orange-900);
  --color-fg-yellow: var(--color-yellow-400);
  --color-fg-disabled: var(--color-gray-400);
  --color-fg-purple: var(--color-purple-600);
  --color-fg-cyan: var(--color-cyan-600);
  --color-fg-indigo: var(--color-indigo-600);
  --color-fg-pink: var(--color-pink-600);
  --color-fg-lime: var(--color-lime-600);

  /* BACKGROUND COLOR VARIABLES */
  /* used for neutral colors */
  --color-neutral-primary-soft: var(--color-white);
  --color-neutral-primary: var(--color-white);
  --color-neutral-primary-medium: var(--color-white);
  --color-neutral-primary-strong: var(--color-white);
  --color-neutral-secondary-soft: var(--color-gray-50);
  --color-neutral-secondary: var(--color-gray-50);
  --color-neutral-secondary-medium: var(--color-gray-50);
  --color-neutral-secondary-strong: var(--color-gray-50);
  --color-neutral-secondary-strongest: var(--color-gray-50);
  --color-neutral-tertiary-soft: var(--color-gray-100);
  --color-neutral-tertiary: var(--color-gray-100);
  --color-neutral-tertiary-medium: var(--color-gray-100);
  --color-neutral-quaternary: var(--color-gray-200);
  --color-neutral-quaternary-medium: var(--color-gray-200);
  --color-gray: var(--color-gray-300);

  /* used for brand colors */
  --color-brand-softer: var(--color-primary-50);
  --color-brand-soft: var(--color-primary-100);
  --color-brand: var(--color-primary-700);
  --color-brand-medium: var(--color-primary-200);
  --color-brand-strong: var(--color-primary-800);

  /* used for status colors */
  --color-success-soft: var(--color-emerald-50);
  --color-success: var(--color-emerald-700);
  --color-success-medium: var(--color-emerald-100);
  --color-success-strong: var(--color-emerald-800);
  --color-danger-soft: var(--color-rose-50);
  --color-danger: var(--color-rose-700);
  --color-danger-medium: var(--color-rose-100);
  --color-danger-strong: var(--color-rose-800);
  --color-warning-soft: var(--color-orange-50);
  --color-warning: var(--color-orange-500);
  --color-warning-medium: var(--color-orange-100);
  --color-warning-strong: var(--color-orange-700);
  --color-dark-soft: var(--color-gray-800);
  --color-dark: var(--color-gray-800);
  --color-dark-strong: var(--color-gray-900);
  --color-disabled: var(--color-gray-100);
  --color-purple: var(--color-purple-500);
  --color-sky: var(--color-sky-500);
  --color-teal: var(--color-teal-600);
  --color-pink: var(--color-pink-600);
  --color-cyan: var(--color-cyan-500);
  --color-fuchsia: var(--color-fuchsia-600);
  --color-indigo: var(--color-indigo-600);
  --color-orange: var(--color-orange-400);

  /* BORDER COLOR VARIABLES */
  --color-buffer: var(--color-white);
  --color-buffer-medium: var(--color-white);
  --color-buffer-strong: var(--color-white);
  --color-muted: var(--color-gray-50);
  --color-light-subtle: var(--color-gray-100);
  --color-light: var(--color-gray-100);
  --color-light-medium: var(--color-gray-100);
  --color-default-subtle: var(--color-gray-200);
  --color-default: var(--color-gray-200);
  --color-default-medium: var(--color-gray-200);
  --color-default-strong: var(--color-gray-200);

  /* used for status colors */
  --color-success-subtle: var(--color-emerald-200);
  --color-danger-subtle: var(--color-rose-200);
  --color-warning-subtle: var(--color-orange-200);
  --color-brand-subtle: var(--color-primary-200);
  --color-brand-light: var(--color-primary-600);
  --color-dark-subtle: var(--color-gray-800);
  --color-dark-backdrop: var(--color-gray-950);

  /* shiki variables */
  --color-shiki-fg-brand: #79b8ff;
  --color-shiki-fg-brand-subtle: #9ecbff;
}

.dark {
  /* text color variables */
  --color-body: var(--color-gray-400);
  --color-body-subtle: var(--color-gray-400);
  --color-heading: var(--color-white);
  --color-fg-brand-subtle: var(--color-primary-200);
  --color-fg-brand: var(--color-primary-500);
  --color-fg-brand-strong: var(--color-primary-400);
  --color-fg-success: var(--color-emerald-600);
  --color-fg-success-strong: var(--color-emerald-300);
  --color-fg-danger: var(--color-rose-500);
  --color-fg-danger-strong: var(--color-rose-300);
  --color-fg-warning-subtle: var(--color-orange-500);
  --color-fg-warning: var(--color-orange-300);
  --color-fg-yellow: var(--color-yellow-400);
  --color-fg-disabled: var(--color-gray-600);
  --color-fg-purple: var(--color-purple-500);
  --color-fg-cyan: var(--color-cyan-500);
  --color-fg-indigo: var(--color-indigo-500);
  --color-fg-pink: var(--color-pink-500);
  --color-fg-lime: var(--color-lime-500);

  /* background color variables */
  --color-neutral-primary-soft: var(--color-gray-900);
  --color-neutral-primary: var(--color-gray-950);
  --color-neutral-primary-medium: var(--color-gray-800);
  --color-neutral-primary-strong: var(--color-gray-700);
  --color-neutral-secondary-soft: var(--color-gray-900);
  --color-neutral-secondary: var(--color-gray-950);
  --color-neutral-secondary-medium: var(--color-gray-800);
  --color-neutral-secondary-strong: var(--color-gray-700);
  --color-neutral-secondary-strongest: var(--color-gray-600);
  --color-neutral-tertiary-soft: var(--color-gray-900);
  --color-neutral-tertiary: var(--color-gray-800);
  --color-neutral-tertiary-medium: var(--color-gray-700);
  --color-neutral-quaternary: var(--color-gray-700);
  --color-neutral-quaternary-medium: var(--color-gray-600);
  --color-gray: var(--color-gray-600);
  --color-brand-softer: var(--color-primary-950);
  --color-brand-soft: var(--color-primary-900);
  --color-brand: var(--color-primary-600);
  --color-brand-medium: var(--color-primary-900);
  --color-brand-strong: var(--color-primary-700);
  --color-success-soft: var(--color-emerald-950);
  --color-success: var(--color-emerald-600);
  --color-success-medium: var(--color-emerald-900);
  --color-success-strong: var(--color-emerald-700);
  --color-danger-soft: var(--color-rose-950);
  --color-danger: var(--color-rose-700);
  --color-danger-medium: var(--color-rose-900);
  --color-danger-strong: var(--color-rose-800);
  --color-warning-soft: var(--color-orange-950);
  --color-warning: var(--color-orange-600);
  --color-warning-medium: var(--color-orange-900);
  --color-warning-strong: var(--color-orange-700);
  --color-dark-soft: var(--color-gray-700);
  --color-dark: var(--color-gray-800);
  --color-dark-strong: var(--color-gray-700);
  --color-disabled: var(--color-gray-800);
  --color-purple: var(--color-purple-500);
  --color-sky: var(--color-sky-500);
  --color-teal: var(--color-teal-500);
  --color-pink: var(--color-pink-500);
  --color-cyan: var(--color-cyan-500);
  --color-fuchsia: var(--color-fuchsia-500);
  --color-indigo: var(--color-indigo-500);
  --color-orange: var(--color-orange-400);

  /* border color variables */
  --color-buffer: var(--color-gray-950);
  --color-buffer-medium: var(--color-gray-900);
  --color-buffer-strong: var(--color-gray-800);
  --color-muted: var(--color-gray-900);
  --color-light-subtle: var(--color-gray-900);
  --color-light: var(--color-gray-800);
  --color-light-medium: var(--color-gray-700);
  --color-default-subtle: var(--color-gray-900);
  --color-default: var(--color-gray-800);
  --color-default-medium: var(--color-gray-700);
  --color-default-strong: var(--color-gray-600);
  --color-success-subtle: var(--color-emerald-900);
  --color-danger-subtle: var(--color-rose-900);
  --color-warning-subtle: var(--color-orange-900);
  --color-brand-subtle: var(--color-primary-900);
  --color-brand-light: var(--color-primary-600);
  --color-dark-subtle: var(--color-gray-700);
  --color-dark-backdrop: var(--color-gray-950);
}