:root {
  color-scheme: light;

  --color-mc-blue-dark:    #202c55;
  --color-mc-blue-deep:    #121c3f;
  --color-mc-gold:         #d29e0d;
  --color-mc-teal:         #59b7b3;
  --color-mc-teal-dark:    #32a39e;
  --color-mc-sky:          #48bfdd;
  --color-mc-gray:         #c2c6c9;
  --color-mc-gray-light1:  #e5e5e5;
  --color-mc-gray-light2:  #eaeaea;
  --color-mc-white:        #ffffff;
  --color-mc-black:        #000000;
  --color-mc-muted:        #4e5f96;
  --color-mc-note:         #565656;
  --color-mc-error:        #c62828;
  --color-mc-error-inv:    #ff7070;

  --color-mc-white-30:     rgba(255, 255, 255, 0.3);
  --color-mc-white-50:     rgba(255, 255, 255, 0.5);
  --color-mc-white-75:     rgba(255, 255, 255, 0.75);
  --color-mc-teal-80:      rgba(89, 183, 179, 0.8);
  --color-mc-sky-80:       rgba(72, 191, 221, 0.8);
  --color-mc-gray-80:      rgba(194, 198, 201, 0.8);
  --color-mc-blue-dark-50: rgba(32, 44, 85, 0.5);
  --color-mc-blue-dark-75: rgba(32, 44, 85, 0.75);
  --color-mc-blue-dark-85: rgba(32, 44, 85, 0.85);

  --text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 18px 60px rgb(9 17 46 / 16%);

  --gradient-sky-teal: linear-gradient(90deg, var(--color-mc-sky) 0%, var(--color-mc-teal) 46%, #d8e0e4 100%);
  --gradient-sky-cyan: linear-gradient(90deg, var(--color-mc-sky) 0%, #61c8cf 100%);
  --mask-blue: linear-gradient(180deg, rgba(18, 28, 63, 0.06) 0%, rgba(26, 38, 78, 0.2) 52%, rgba(8, 15, 42, 0.72) 100%), rgba(74, 94, 137, 0.42);
  --mask-fade: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);

  --font-family: "Campton", "Manrope", Poppins, Montserrat, "Aptos Display", Arial, sans-serif;

  --font-size-xxs: 0.875rem; /* 14px */
  --font-size-xs:  1rem;     /* 16px */
  --font-size-s:   1.25rem;  /* 20px */
  --font-size-m:   1.5rem;   /* 24px */
  --font-size-md:  1.75rem;  /* 28px */
  --font-size-l:   2.25rem;  /* 36px */
  --font-size-xl:  2.5rem;   /* 40px */
  --font-size-1xl: 2.75rem;  /* 44px */
  --font-size-2xl: 3.5rem;   /* 56px */
  --font-size-3xl: 4rem;     /* 64px */
  --font-size-4xl: 4.5rem;   /* 72px */
  --font-size-5xl: 5.5rem;   /* 88px */

  /* Spacing scale */
  --gap-4:  4px;
  --gap-8:  8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-28: 28px;
  --gap-32: 32px;
  --gap-40: 40px;

  --frame-desktop-width: 1728px;

  --radius-none: 0px;
  --radius-xxs:  2px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --transition-fast: 0.2s ease;
    --transition-page: 0.3s ease;
  }
}