:root {
  /* Colors */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-primary: #0d2940;
  --color-secondary: #0a2235;
  --color-accent: #c1f1ff;
  --color-accent-1: #defdff;
  --color-accent-2: #9ecfef;
  --color-shadow: #b6eeff;
  --color-dropShadow: #1c5d91;
  --color-gray-50: #fdffff;
  --color-gray-100: #d9d9d9;
  --color-gray-200: #d0d0d0;
  --color-gray-600: #394450;
  --color-danger: #f54b4b;
  --color-danger-1: #cc0938;
  --color-border-1: #d1f5ff;
  --color-border-2: #081a28;
  --color-border-3: #afccd4;
  --color-green: #0b7b3c;
  --color-checkbox: #b2fbff;
  --color-yellow: #f4bc3c;

  --font-body-primary: var(--font-inter);
  --font-body-secondary: var(--font-montserrat);
  --font-brand: var(--font-orbitron);

  /* Font sizes */
  --text-xs: 0.75rem;
  /* 12px */
  --text-13: 0.8125rem;
  /* 13px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-15: 0.9375rem;
  /* 15px */
  --text-base: 1rem;
  /* 16px */
  --text-17: 1.0625rem;
  /* 17px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-19: 1.1875rem;
  /* 19px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */
  --text-50: 3.125rem;
  /* 50px */
  --text-72: 4.5rem;
  /* 72px */

  /* Spacing: margin, padding, gap etc. */
  --spacing-0: 0;
  /* 0px */
  --spacing-1: 0.25rem;
  /* 4px */
  --spacing-2: 0.375rem;
  /* 6px */
  --spacing-2-5: 0.4375rem;
  /* 7px */
  --spacing-3: 0.5rem;
  /* 8px */
  --spacing-4: 0.625rem;
  /* 10px */
  --spacing-5: 0.75rem;
  /* 12px */
  --spacing-6: 0.875rem;
  /* 14px */
  --spacing-7: 1rem;
  /* 16px */
  --spacing-8: 1.125rem;
  /* 18px */
  --spacing-9: 1.25rem;
  /* 20px */
  --spacing-10: 1.5rem;
  /* 24px */
  --spacing-11: 1.75rem;
  /* 28px */
  --spacing-12: 2rem;
  /* 32px */
  --spacing-13: 2.25rem;
  /* 36px */
  --spacing-14: 2.5rem;
  /* 40px */

  /* Gradients */
  --bg-gradient-ln-1: linear-gradient(180deg, #07141f 0%, #0d2940 100%);
  --bg-gradient-ln-2: linear-gradient(to bottom,
      rgba(7, 20, 31, 0.7) 0%,
      rgba(13, 41, 64, 0.5) 30%);

  /* Border Radius */
  --radius-xs: 0.125rem;
  /* 2px */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-md: 0.375rem;
  /* 6px */
  --radius-lg: 0.5rem;
  /* 8px */
  --radius-lg-1: 0.625rem;
  /* 10px */
  --radius-xl: 0.75rem;
  /* 12px */
  --radius-2xl: 1rem;
  /* 16px */
  --radius-3xl: 1.5rem;
  /* 24px */
  --radius-full: 9999px;
  --radius-5: 0.3125rem;
  /* 5px */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --shadow-3xl: 0 35px 60px rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 0 5px var(--color-accent);
  --shadow-btn-glow:
    0 0 5.217px 0 #ffffff inset,
    0 0 4.371px 0 rgba(255, 255, 255, 0.05),
    0 0 4.371px 0 rgba(0, 176, 255, 0.3),
    0 0 17.906px 0 rgba(255, 255, 255, 0.3),
    0 0 17.906px 0 rgba(0, 176, 255, 0.3);
  --shadow-brand-logo: 0px 0px 9.42px 0px rgba(0, 176, 255, 0.3),
    0px 0px 9.42px 0px rgba(255, 255, 255, 0.3),
    0px 0px 2.3px 0px rgba(0, 176, 255, 0.3);
  --shadow-card-inset: 0px 0px 8.55px 0px rgba(28, 93, 145, 1) inset;
  --shadow-card-glow:
    0px 0px 9.42px 0px rgba(0, 176, 255, 0.3),
    0px 0px 9.42px 0px rgba(255, 255, 255, 0.3),
    0px 0px 2.3px 0px rgba(0, 176, 255, 0.3),
    0px 0px 2.3px 0px rgba(255, 255, 255, 0.05),
    0px 0px 2.74px 0px rgba(255, 255, 255, 1) inset;

  /* Text shadow */
  --text-shadow: 0 0 2.14px var(--color-shadow);
  --text-shadow-hover: 0 0 4px var(--color-shadow);

  /* Breakpoints */
  --breakpoint-xs: 20rem;
  /* 320px */
  --breakpoint-sm: 30rem;
  /* 480px */
  --breakpoint-md: 48rem;
  /* 768px */
  --breakpoint-lg: 64rem;
  /* 1024px */
  --breakpoint-xl: 80rem;
  /* 1280px */
  --breakpoint-2xl: 96rem;
  /* 1536px */
  --breakpoint-3xl: 112rem;
  /* 1792px */
  --breakpoint-4xl: 128rem;
  /* 2048px */
  --breakpoint-5xl: 144rem;
  /* 2304px */
  --breakpoint-6xl: 160rem;
  /* 2560px */
  --breakpoint-7xl: 192rem;
  /* 3072px */
  --breakpoint-8xl: 224rem;
  /* 3584px */
  --breakpoint-9xl: 256rem;
  /* 4096px */
  --breakpoint-10xl: 288rem;
  /* 4608px */

  /* Container sizes */
  --container-full: 100%;
  --container-sm: 37.5rem;
  --container-lg: 62.375rem;
  /* 998px */
  --container-default: 80rem;
  /* 1280px */
  --container-xl: 87.5rem;
  /* 1400px */
  --container-2xl: 100rem;
  /* 1600px */

  /* Transitions */
  --transition-duration-fast: 0.1s;
  --transition-duration-base: 0.3s;
  --transition-duration-slow: 0.5s;
  --transition-timing-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-timing-linear: linear;
  --transition-timing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-property-all: all;
  --transition-property-background-color: background-color;
  --transition-property-box-shadow: box-shadow;
  --transition-property-border-color: border-color;
  --transition-property-transform: transform;
  --transition-property-opacity: opacity;
  --transition-property-color: color;
  --transition-background-color: background-color var(--transition-duration-base) var(--transition-timing-ease);
  --transition-box-shadow: box-shadow var(--transition-duration-base) var(--transition-timing-ease);
  --transition-border-color: border-color var(--transition-duration-base) var(--transition-timing-ease);
  --transition-transform: transform var(--transition-duration-base) var(--transition-timing-ease);
  --transition-opacity: opacity var(--transition-duration-base) var(--transition-timing-ease);
  --transition-color: color var(--transition-duration-base) var(--transition-timing-ease);
  --transition-visibility: visibility var(--transition-duration-base) var(--transition-timing-ease);
  --transition-all: all var(--transition-duration-base) var(--transition-timing-ease);

  /* Other */
  --button-height: 3rem;
  /* 48px */
  --input-height: 2.5rem;
  /* 40px */
}