:root {
  --color-gray-darker: #333;
  --color-gray-dark: #999;
  --color-gray: #e5e5e5;
  --color-gray-light: #f3f3f3;
  --color-gray-lighter: #f9f9f9;

  --color-primary: #e965a8;
  --color-primary-gradient: linear-gradient(to right, #f72cb8, #f9a6b6);

  --color-text-base: var(--color-gray-darker);
  --color-text-light: var(--color-gray-dark);
  --color-divider: var(--color-gray);
  --color-focus-shadow: 0 0 0 0.225em rgba(3, 102, 214, 0.3);

  --font-size-base: 14px;
  --font-size-sm: 0.85rem; /* 12px */
  --font-size-md: 1rem; /* 14px */
  --font-size-lg: 1.14rem; /* 16px */

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  --space-1x: 4px;
  --space-2x: 8px;
  --space-3x: 12px;
  --space-4x: 16px;
  --space-5x: 20px;
  --space-6x: 24px;
  --space-7x: 28px;
  --space-8x: 32px;
  --space-9x: 36px;
  --space-10x: 40px;

  --button-height: 40px;
}
