: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);

  /* 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: 75rem; /* 1200px */
  --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 */
}