@custom-media --media-sm (min-width: 640px);
@custom-media --media-md (min-width: 768px);
@custom-media --media-lg (min-width: 1024px);
@custom-media --media-xl (min-width: 1280px);

:root {
  --font-serif: "Sentinel", Garamond, serif;
  --gradient-linear-blue-purple: linear-gradient(
    270deg,
    #62aad2 -0.58%,
    #6b4fbb
  );

  /* Overrides */
  --border: var(--size-px) solid var(--color-border);

  --shadow-sm:
    0px 2px 2px 0px rgba(88, 70, 80, 0.01),
    0px 1px 2px 0px rgba(88, 70, 80, 0.05),
    0px 1px 1px 0px rgba(88, 70, 80, 0.09),
    0px 0px 1px 0px rgba(88, 70, 80, 0.1);
  --shadow-md:
    0px 14px 5px 0px rgba(88, 70, 80, 0.01),
    0px 8px 5px 0px rgba(88, 70, 80, 0.04),
    0px 3px 3px 0px rgba(88, 70, 80, 0.07),
    0px 0px 2px 0px rgba(88, 70, 80, 0.08);
  --shadow-lg:
    0px 39px 16px 0px rgba(88, 70, 80, 0.01),
    0px 22px 13px 0px rgba(88, 70, 80, 0.04),
    0px 10px 10px 0px rgba(88, 70, 80, 0.07),
    0px 1px 5px 0px rgba(88, 70, 80, 0.08);
  --shadow-xl:
    0px 277px 111px 0px rgba(88, 70, 80, 0.01),
    0px 156px 94px 0px rgba(88, 70, 80, 0.04),
    0px 69px 69px 0px rgba(88, 70, 80, 0.07),
    0px 17px 38px 0px rgba(88, 70, 80, 0.08);

  /* Color Primitives */
  --color-neutral-00: #ffffff;
  --color-neutral-10: #f6f5f4;
  --color-neutral-20: #edeceb;
  --color-neutral-30: #e0dfdf;
  --color-neutral-40: #cccbca;
  --color-neutral-45: #767676;
  --color-neutral-50: #424242;
  --color-neutral-60: #363535;
  --color-neutral-70: #262626;
  --color-neutral-80: #1b1b1b;
  --color-neutral-90: #000000;

  --color-blue-00: #e5f3ff;
  --color-blue-10: #c2e3ff;
  --color-blue-20: #73c0ff;
  --color-blue-30: #0d76cc;
  --color-blue-40: #095594;
  --color-blue-50: #193661;

  --color-green-00: #e4fbe9;
  --color-green-10: #a8f0bc;
  --color-green-20: #57cf78;
  --color-green-30: #24843f;
  --color-green-40: #18592a;
  --color-green-50: #1c3b24;

  --color-yellow-00: #ffecc7;
  --color-yellow-10: #ffd787;
  --color-yellow-20: #ffba30;
  --color-yellow-30: #82652f;
  --color-yellow-40: #574628;
  --color-yellow-50: #362a1f;

  --color-red-00: #ffe0e1;
  --color-red-10: #ffadaf;
  --color-red-20: #ff7779;
  --color-red-30: #d22628;
  --color-red-40: #961d1d;
  --color-red-50: #6b1414;

  /* Extended Palette */

  --color-orange-00: #ffece0;
  --color-orange-10: #ffd2b8;
  --color-orange-20: #ff8e4d;
  --color-orange-30: #b85300;
  --color-orange-40: #8c3300;
  --color-orange-50: #4f1d00;

  --color-turquoise-00: #bdfffb;
  --color-turquoise-10: #73e5de;
  --color-turquoise-20: #00b2a7;
  --color-turquoise-30: #00756e;
  --color-turquoise-40: #005751;
  --color-turquoise-50: #003834;

  --color-cyan-00: #e4f2f5;
  --color-cyan-10: #ade9f7;
  --color-cyan-20: #48cef0;
  --color-cyan-30: #0f6187;
  --color-cyan-40: #0c4f6e;
  --color-cyan-50: #062a3b;

  --color-purple-00: #e9e0ff;
  --color-purple-10: #d5c4ff;
  --color-purple-20: #bca4fc;
  --color-purple-30: #6143b2;
  --color-purple-40: #493287;
  --color-purple-50: #2f2057;

  --color-magenta-00: #ffe8f4;
  --color-magenta-10: #ff99d8;
  --color-magenta-20: #ff4ac6;
  --color-magenta-30: #b9007e;
  --color-magenta-40: #69174f;
  --color-magenta-50: #471036;

  --color-brown-00: #fff4e0;
  --color-brown-10: #ffdfa3;
  --color-brown-20: #e5bf79;
  --color-brown-30: #795e2d;
  --color-brown-40: #574320;
  --color-brown-50: #382b15;

  /* Colors Tokens */
  --color-surface-00: var(--color-neutral-00);
  --color-surface-10: var(--color-neutral-10);
  --color-surface-20: var(--color-neutral-20);
  --color-surface-30: var(--color-neutral-30);
  --color-surface-40: var(--color-neutral-40);

  --color-surface-info: var(--color-blue-00);
  --color-surface-positive: var(--color-green-00);
  --color-surface-warning: var(--color-yellow-00);
  --color-surface-negative: var(--color-red-00);

  --color-text-primary: var(--color-neutral-80);
  --color-text-primary-inverse: var(--color-neutral-00);
  --color-text-secondary: var(--color-neutral-45);
  --color-text-secondary-inverse: var(--color-neutral-00);
  --color-text-info: var(--color-blue-30);
  --color-text-info-emphasis: var(--color-blue-40);
  --color-text-positive: var(--color-green-30);
  --color-text-positive-emphasis: var(--color-green-40);
  --color-text-warning: var(--color-yellow-40);
  --color-text-warning-emphasis: var(--color-yellow-40);
  --color-text-negative: var(--color-red-30);
  --color-text-negative-emphasis: var(--color-red-40);

  --color-border: var(--color-neutral-30);
  --color-border-input: var(--color-neutral-40);
  --color-border-emphasis: var(--color-neutral-45);
  --color-border-info: var(--color-blue-20);
  --color-border-positive: var(--color-green-20);
  --color-border-warning: var(--color-yellow-20);
  --color-border-negative: var(--color-red-20);

  --color-interactive-primary: var(--color-neutral-80);
  --color-interactive-primary-contrast: var(--color-neutral-00);
  --color-interactive-primary-hover: var(--color-neutral-60);
  --color-interactive-primary-active: var(--color-neutral-50);
  --color-interactive-secondary: var(--color-neutral-20);
  --color-interactive-secondary-contrast: var(--color-neutral-80);
  --color-interactive-secondary-hover: var(--color-neutral-30);
  --color-interactive-secondary-active: var(--color-neutral-40);

  --color-interactive-info: var(--color-blue-30);
  --color-interactive-info-contrast: var(--color-neutral-00);
  --color-interactive-info-hover: var(--color-blue-40);
  --color-interactive-info-active: var(--color-blue-50);

  --color-interactive-positive: var(--color-green-30);
  --color-interactive-positive-contrast: var(--color-neutral-00);
  --color-interactive-positive-hover: var(--color-green-40);
  --color-interactive-positive-active: var(--color-green-50);

  --color-interactive-warning: var(--color-yellow-20);
  --color-interactive-warning-contrast: var(--color-yellow-50);
  --color-interactive-warning-hover: var(--color-yellow-10);
  --color-interactive-warning-active: var(--color-yellow-00);

  --color-interactive-negative: var(--color-red-30);
  --color-interactive-negative-contrast: var(--color-neutral-00);
  --color-interactive-negative-hover: var(--color-red-40);
  --color-interactive-negative-active: var(--color-red-50);

  /* Accessibility */
  --a11y-outline-width: 3px;
  --a11y-outline-color: var(--color-brand-accessible);

  /* Typography */
  --font-size-display-xs: var(--font-size-2xs);
  --font-size-display-sm: var(--font-size-md);
  --font-size-display-md: var(--font-size-xl);
  --font-size-display-lg: var(--font-size-3xl);
  --font-size-display-xl: var(--font-size-5xl);
  --font-size-display-2xl: var(--font-size-7xl);

  --font-size-text-sm: var(--font-size-sm);
  --font-size-text-md: var(--font-size-md);
  --font-size-text-lg: var(--font-size-lg);
  --font-size-text-xl: var(--font-size-3xl);
  --font-size-text-2xl: var(--font-size-5xl);

  /* Spacing */
  --space-1: var(--size-0-5);
  --space-2: var(--size-1);
  --space-3: var(--size-1-5);
  --space-4: var(--size-2);
  --space-5: var(--size-2-5);
  --space-6: var(--size-3);
  --space-8: var(--size-4);
  --space-10: var(--size-5);
  --space-12: var(--size-6);
  --space-14: var(--size-7);
  --space-16: var(--size-8);
  --space-18: var(--size-9);
  --space-20: var(--size-10);
  --space-30: var(--size-15);
  --space-40: var(--size-20);
}

@media (--media-md) {
  :root {
    /* Typography */
    --font-size-display-xs: var(--font-size-md);
    --font-size-display-sm: var(--font-size-xl);
    --font-size-display-md: var(--font-size-3xl);
    --font-size-display-lg: var(--font-size-5xl);
    --font-size-display-xl: var(--font-size-7xl);
    --font-size-display-2xl: var(--font-size-10xl);

    /* Spacing */
    --space-1: var(--size-1);
    --space-2: var(--size-2);
    --space-3: var(--size-3);
    --space-4: var(--size-4);
    --space-5: var(--size-5);
    --space-6: var(--size-6);
    --space-8: var(--size-8);
    --space-10: var(--size-10);
    --space-12: var(--size-12);
    --space-14: var(--size-14);
    --space-16: var(--size-16);
    --space-18: var(--size-18);
    --space-20: var(--size-20);
    --space-30: var(--size-30);
    --space-40: var(--size-40);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  text-rendering: optimizeSpeed;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

:is(a, button, input, textarea, select) {
  outline-width: 0;
  outline-color: transparent;
  transition: outline-color var(--duration-normal);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline-width: var(--a11y-outline-width);
    outline-color: var(--a11y-outline-color);
    outline-style: solid;
  }
}

/**
 * Apply some default styling to global UI in order to
 * prevent a large CLS.
 */
bp-global-header:not(:defined) {
  display: block;
  height: var(--size-6);
}

bp-global-footer:not(:defined) {
  display: block;
  height: var(--size-60);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}