:root {
  /* Colors */
  --color-white: #fff;
  --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-black: var(--color-gray-900);
  --color-backdrop: rgba(0, 0, 0, 0.85);

  --color-red-100: #fff0f0;
  --color-red-200: #ffe5e6;
  --color-red-300: #ffcccc;
  --color-red-400: #ffb3b3;
  --color-red-500: #ff8080;
  --color-red-600: #fe4c4c;
  --color-red-700: #e51a1a;
  --color-red-800: #b81414;
  --color-red-900: #800000;

  --color-yellow-100: #fffdf0;
  --color-yellow-200: #fff5d1;
  --color-yellow-300: #ffecb3;
  --color-yellow-400: #ffe394;
  --color-yellow-500: #ffda75;
  --color-yellow-600: #ffcf56;
  --color-yellow-700: #e6b84c;
  --color-yellow-800: #b38e3a;
  --color-yellow-900: #525100;

  /* Layout */
  --columns: 14;
  --container-padding: var(--spacing-16);
  --container-padding-mobile: var(--spacing-8);
  --container: 95rem;

  /* Fonts */
  --font-sans: "Spring", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-mono: "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier,
    monospace;

  --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-0: 0;
  --spacing-px-sm: 0.015rem;
  --spacing-px: 1px;
  --spacing-2px: 2px;
  --spacing-1: 0.25rem;
  --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-20: 5rem;
  --spacing-24: 6rem;
  --spacing-36: 9rem;
  --spacing-42: 10.5rem;

  /* Text sizes */
  --text-3xs: 0.4rem;
  --text-2xs: 0.6rem;
  --text-xs: 0.75rem;
  --text-sm: 0.975rem;
  --text-base: 1.25rem;
  --text-lead: 1.675rem;
  --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: var(--text-2xl);

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