:root {
  --color-dark: #04080c;
  --color-dark-l1: #0e1317;
  --color-dark-l2: #191e22;
  --color-grey: #c4c4c4;
  --color-grey-d1: #637897;
  --color-grey-d2: #586d8e;
  --color-light: #fff9fb;
  --color-light-d1: #edf2f6;
  --color-light-d2: #e4e8ec;
  --color-white: #ffffff;
  --color-primary: #0077cc;
  --color-secondary: #ffc400;
  --color-green: #00875a;
  --color-orange: #ff7c22;
  --color-red: #de350b;
  --color-purple: #fd6df9;
  --color-indigo: #9b6cfc;
  --color-crayola: #f6385c;
  --color-lagoon: #34d8d6;
  --color-sunglow: #ffc858;
  --color-midnight: #252627;
  --bg-lagoon: var(--color-lagoon);
  --bg-crayola: var(--color-crayola);
  --bg-sunglow: var(--color-sunglow);
  --bg-midnight: var(--color-midnight);
  --font-family-outfit: "Outfit", sans-serif;
  --font-family-sans:
    "Outfit", -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono:
    "Outfit", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 50px;
  --font-size-30: 30px;
  --font-size-36: 36px;
  --font-size-48: 48px;
  --line-height-tight: 1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --font-headline1: var(--font-weight-bold) var(--font-size-6xl) /
    var(--line-height-tight) var(--font-family-outfit);
  --font-headline2: var(--font-weight-bold) var(--font-size-5xl) /
    var(--line-height-snug) var(--font-family-outfit);
  --font-headline3: var(--font-weight-semibold) var(--font-size-2xl) /
    var(--line-height-snug) var(--font-family-outfit);
  --font-base: var(--font-weight-light) var(--font-size-base) /
    var(--line-height-normal) var(--font-family-outfit);
  --font-lead: var(--font-weight-light) var(--font-size-xl) /
    var(--line-height-normal) var(--font-family-outfit);
  --font-bold: var(--font-weight-semibold) var(--font-size-xl) /
    var(--line-height-normal) var(--font-family-outfit);
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-xs: var(--spacing-2);
  --spacing-sm: var(--spacing-4);
  --spacing-md: var(--spacing-6);
  --spacing-lg: var(--spacing-8);
  --spacing-xl: var(--spacing-12);
  --spacing-xxl: var(--spacing-16);
  --container-max-width: 1140px;
  --container-min-width: 300px;
  --container-width: 90%;
  --container-padding: var(--spacing-4);
  --section-padding-y: var(--spacing-16);
  --section-padding-x: var(--spacing-4);
  --dimension-16: 16px;
  --dimension-48: 48px;
  --dimension-100: 100px;
  --dimension-300: 300px;
  --dimension-900: 900px;
  --dimension-1200: 1200px;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 5px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-pressed-white: -1px -1px 1px rgba(255, 255, 255, 0.1);
  --shadow-pressed-black: 1px 1px 1px rgba(0, 0, 0, 0.1);
  --shadow-embossed-white: -1px -1px 1px rgba(255, 255, 255, 0.2);
  --shadow-embossed-black: 1px 1px 1px rgba(0, 0, 0, 0.1);
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --duration-fastest: 0.1s;
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slowest: 0.8s;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-colors:
    color var(--duration-fast) var(--ease-in-out),
    background-color var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out);
  --transition-all: all var(--duration-normal) var(--ease-in-out);
  --z-index-negative-1: -1;
  --z-index-0: 0;
  --z-index-1: 1;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --embossed-shadow: -2px -2px 1px rgba(255, 255, 255, 0.1), 2px 2px 1px rgba(0, 0, 0, 0.1), var(--shadow-pressed-white), var(--shadow-pressed-black)
}