@layer tokens {
  :root {
    --primary: #1E22AA;
    --secondary-blue: #0657C3;
    --dark: #0E0E0E;
    --grey: #7e7e7e;
    --white: #FFFFFF;
    --header-bg: rgba(14, 14, 14, 0.2);
    --card-bg: rgba(30, 34, 170, 0.1);
    --wrapper-bg: rgba(30, 34, 170, 0.05);
    --transparent-dark: rgba(14, 14, 14, 0.0);

    --radius-btn: 8px;
    --radius-card: 24px;
    --radius-pill: 999px;

    --border-1: 1px;
    --border-2: 2px;

    --transition: 300ms ease;

    --container: 1440px;
    --header-container: 1600px;

    --media-1280px: 80em;
    --media-1024px: 64em;
    --media-960px: 60em;
    --media-768px: 48em;
    --media-440px: 27.5em;
    --media-390px: 24.375em;
    
    --spacing-0: 0;
    --spacing-1em: 1em;
    --spacing-2em: 2em;
    --spacing-3em: 3em;
    --spacing-4em: 4em;
    --spacing-5em: 5em;
    --spacing-6em: 6em;
    --gap-1em: 1em;
    --gap-2em: 2em;
    --gap-3em: 3em;
    --gap-4em: 4em;
    --gap-5em: 5em;

    --backdrop-blur-xxs: blur(4px);
    --backdrop-blur-xs: blur(6px);
    --backdrop-blur-sm: blur(8px);
    --backdrop-blur-md: blur(16px);
    --backdrop-blur-lg: blur(32px);

    --ui-text-size: 1rem;
    --ui-text-dropdown: 0.875rem;
    --ui-text-weight: 400;

  }
}