:root {
  /* Base values */
  --font-size-1: 12px;
  --font-size-2: 14px;
  --font-size-3: 16px;
  --font-size-4: 18px;
  --font-size-5: 20px;
  --font-size-6: 24px;
  --font-size-7: 28px;
  --font-size-8: 36px;
  --font-size-9: 60px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 40px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  --spacing-10: 80px;
  --spacing-11: 96px;
  --spacing-12: 128px;

  --border-size-thin: 1px;
  --border-size-medium: 2px;
  --border-size-thick: 4px;

  --border-radius-1: 2px;
  --border-radius-2: 4px;
  --border-radius-3: 8px;
  --border-radius-4: 16px;
  --border-radius-5: 18px;
  --border-radius-6: 9999px;

  --box-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --box-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --box-shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --box-shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --box-shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --box-shadow-6: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Color values */

  --base-color-50: #fafafa;
  --base-color-100: #f5f5f5;
  --base-color-200: #e5e5e5;
  --base-color-300: #d4d4d4;
  --base-color-400: #a3a3a3;
  --base-color-500: #737373;
  --base-color-600: #525252;
  --base-color-700: #404040;
  --base-color-800: #262626;
  --base-color-900: #171717;
  --base-color-950: #0a0a0a;

  --success-color: #22c55e;
  --success-font-color: var(--base-color-50);

  --danger-color: #ef4444;
  --danger-font-color: var(--base-color-50);

  --warning-color: #f97316;
  --warning-font-color: var(--base-color-50);

  --active-color: #3b82f6;
  --active-font-color: var(--base-color-50);

  --inactive-color: var(--base-color-400);
  --inactive-font-color: var(--base-color-900);

  /* Settings */

  --font-family: Inter;
  --font-family-code: 'JetBrains Mono';

  --font-size: var(--font-size-2);

  --border-radius: var(--border-radius-2);

  --border-width: var(--border-size-thin);

  --gap: var(--spacing-3);

  --padding-x: var(--spacing-3);
  --padding-y: var(--spacing-2);
  --padding: var(--padding-y) var(--padding-x);

  --box-shadow: var(--box-shadow-1);

  --light-color: var(--base-color-50);

  --dark-color: var(--base-color-950);

  /* Theme settings */

  --background-color: #fff;

  --font-color: var(--base-color-950);
  --font-muted-color: var(--base-color-500);
  --font-faded-color: var(--base-color-400);

  --border-color: var(--base-color-300);
  --border: var(--border-width) solid var(--border-color);

  --outline-color: var(--base-color-400);
  --outline: var(--border-width) solid var(--outline-color);

  --primary-color: var(--base-color-900);
  --primary-font-color: var(--base-color-50);

  --secondary-color: var(--base-color-100);
  --secondary-font-color: var(--font-color);

  --highlight-color: var(--base-color-50);
  --highlight-font-color: var(--font-color);

  --input-background-color: var(--base-color-200);
  --input-disabled-color: var(--base-color-100);

  [data-theme='dark'] {
    --background-color: var(--base-color-950);

    --font-color: var(--base-color-200);
    --font-muted-color: var(--base-color-400);
    --font-faded-color: var(--base-color-500);

    --border-color: var(--base-color-700);
    --border: var(--border-width) solid var(--border-color);

    --outline-color: var(--base-color-600);
    --outline: var(--border-width) solid var(--outline-color);

    --primary-color: var(--base-color-50);
    --primary-font-color: var(--base-color-900);

    --secondary-color: var(--base-color-800);
    --secondary-font-color: var(--font-color);

    --highlight-color: var(--base-color-800);
    --highlight-font-color: var(--font-color);

    --input-background-color: var(--base-color-700);
    --input-disabled-color: var(--base-color-800);
  }

  :where(input, textarea, select) {
    min-width: 240px;
  }

  * {
    outline-color: var(--primary-color);
  }
}