@layer theme {
  :root {
    /* Default light theme variables */
    --background: #fff;
    --foreground: #09090b;
    --card: #fff;
    --card-foreground: #09090b;
    --primary: #574747;
    --primary-foreground: #fafafa;
    --secondary: #f4f4f5;
    --secondary-foreground: #574747;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --faint: #fafafa;
    --faint-foreground: #a1a1aa;
    --accent: #f4f4f5;
    --danger: #d32f2f;
    --danger-foreground: #fafafa;
    --success: #008032;
    --success-foreground: #fafafa;
    --warning: #a65b00;
    --warning-foreground: #09090b;
    --border: #d4d4d8;
    --input: #d4d4d8;
    --ring: #574747;

    /* ==================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;

    --radius-small: 0.125rem;
    --radius-medium: 0.375rem;
    --radius-large: 0.75rem;
    --radius-full: 9999px;

    --bar-height: 0.5rem;

    --font-sans: system-ui, sans-serif;
    --font-mono: ui-monospace, Consolas, monospace;

    --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
    --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-5: 1.125rem;
    --text-6: 1rem;
    --text-7: 0.875rem;
    --text-8: 0.75rem;
    --text-regular: var(--text-6);

    --leading-normal: 1.5;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 600;

    --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-large: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-dropdown: 50;
    --z-modal: 200;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --background: #09090b;
    --foreground: #fafafa;
    --card: #18181b;
    --card-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --secondary: #27272a;
    --secondary-foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --faint: #1e1e21;
    --faint-foreground: #71717a;
    --accent: #27272a;
    --danger: #f4807b;
    --danger-foreground: #18181b;
    --success: #6cc070;
    --success-foreground: #18181b;
    --warning: #f0a030;
    --warning-foreground: #09090b;
    --border: #52525b;
    --input: #52525b;
    --ring: #d4d4d8;
  }
}