:root {
  /* Brand Colors */
  --color-highlight: #308efa;
  --color-light: var(--color-gray-200);
  --global-bg-color: #fdfdfe;
  --global-font-color: #333333;
  --card-bg-color: #e9e9e9;
  --card-bg-color-hover: #e0e0e0;

  /* Colors */
  --color-white: var(--color-gray-100);
  --color-gray-100: #f7f7f7;
  --color-gray-200: #efefef;
  --color-gray-300: #dddddd;
  --color-gray-400: #cccccc;
  --color-gray-500: #999999;
  --color-gray-600: #777777;
  --color-gray-700: #595959;
  --color-gray-800: #3e3e3e;
  --color-gray-900: #292929;
  --color-darkgray: #222;
  --color-black: var(--color-darkgray);

  /* Layout */
  --content-width: 65rem;
  --columns: 14;
  --container-padding: var(--spacing-4);
  --container: 60rem;
  --logo-size: 100px;

  /* Fonts */
  --font-sans: "OFFSHORE", helvetica neue, sans-serif;
  --font-thin: 300;
  --font-thin: 300;
  --font-normal: 400;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Rounded & Shadows */
  --rounded-xs: 1px;
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 1rem;
  --rounded-2xl: 5rem;

  /* Shadows */
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: rgba(0, 0, 0, 0.025) 0 0 10px, rgba(0, 0, 0, 0.075) 0 5px 40px,
    rgba(0, 0, 0, 0.075) 0 30px 100px;
  --shadow-outline: currentColor 0 0 0 2px;
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-color: 0deg 0% 58%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0.5px 0.7px 1px hsl(var(--shadow-color) / 0.36),
    1.6px 2.2px 3.1px -0.8px hsl(var(--shadow-color) / 0.36),
    4.1px 5.5px 7.7px -1.7px hsl(var(--shadow-color) / 0.36),
    9.9px 13.4px 18.7px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);

  /* Spacing */
  --spacing: 8px;
  --spacing-0: 0;
  --spacing-px-sm: 0.015rem;
  --spacing-px: 1px;
  --spacing-2px: 2px;
  --spacing-1: 0.2rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing--5: -1.25rem;
  --spacing-6: 1.5rem;
  --spacing--6: -1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing--12: -3rem;
  --spacing-16: 4rem;
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-36: 9rem;
  --spacing-42: 10.5rem;

  /* Text sizes */
  --text-xs: 0.55rem;
  --text-sm: 0.65rem;
  --text-m: 0.75rem;
  --text-base: 1.25rem;
  --text-lg: 2.125rem;
  --text-xl: 2.25rem;
  --text-2xl: 2.5rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.5rem;
  --text-5xl: 4rem;
  --text-6xl: 5rem;
  --text-h1: 2rem;

  /* Selection */
  --selection_color: var(--color-gray-100);
  --selection_background_color: var(--color-gray-900);
}

::selection,
::-moz-selection {
  color: rgba(255, 255, 255, 0);
  text-shadow: 0px 0px 3px rgb(0, 0, 0);
}