:root {
  --text-font: 'geist', sans-serif, arial;

  --breakpoint-2xs: 480px;
  --breakpoint-xs: 640px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1536px;
  --breakpoint-2xl: 1920px;

  --content-width: 100%;
  --content-width-gutter: var(--space-lg);

  --duration-multiplier: 1; /* Allow disabling or increase animation speed */
  --duration-75: calc(75ms * var(--duration-multiplier));
  --duration-100: calc(100ms * var(--duration-multiplier));
  --duration-150: calc(150ms * var(--duration-multiplier));
  --duration-200: calc(200ms * var(--duration-multiplier));
  --duration-300: calc(300ms * var(--duration-multiplier));
  --duration-400: calc(400ms * var(--duration-multiplier));
  --duration-500: calc(500ms * var(--duration-multiplier));
  --duration-600: calc(600ms * var(--duration-multiplier));
  --duration-700: calc(700ms * var(--duration-multiplier));
  --duration-800: calc(800ms * var(--duration-multiplier));
  --duration-900: calc(900ms * var(--duration-multiplier));
  --duration-1000: calc(1000ms * var(--duration-multiplier));
  --duration-1200: calc(1200ms * var(--duration-multiplier));
  --duration-1400: calc(1400ms * var(--duration-multiplier));
  --duration-2000: calc(2000ms * var(--duration-multiplier));

  --duration-hover: var(--duration-200);

  /* 12.5px → 12.8px */
  --text-xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  /*  15px → 16px */
  --text-sm: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  /* 18px → 20px */
  --text-md: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  /* 21.6px → 25px */
  --text-lg: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  /* 25.92px → 31.25px */
  --text-xl: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  /* 31.104px → 39.0625px */
  --text-2xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  /* 37.3248px → 48.8281px */
  --text-3xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  /* 44.7898px → 61.0352px */
  --text-4xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);

  /* Space 3xs: 5px → 5px */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  /* Space 2xs: 9px → 10px */
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  /* Space xs: 14px → 15px */
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  /* Space sm: 18px → 20px */
  --space-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  /* Space md: 27px → 30px */
  --space-md: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  /* Space lg: 36px → 40px */
  --space-lg: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  /* Space xl: 54px → 60px */
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  /* Space 2xl: 72px → 80px */
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  /* Space 3xl: 108px → 120px */
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 5px → 10px */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  /* Space 2xs-xs: 9px → 15px */
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  /* Space xs-sm: 14px → 20px */
  --space-xs-sm: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  /* Space s-m: 18px → 30px */
  --space-sm-md: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  /* Space md-lg: 27px → 40px */
  --space-md-lg: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  /* Space lg-xl: 36px → 60px */
  --space-lg-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  /* Space xl-2xl: 54px → 80px */
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  /* Space 2xl-3xl: 72px → 120px */
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

  /* Rounded borders */
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 16px;
  --rounded-xl: 32px;
  --rounded-full: 9999px;
}

:root {
  /* Brand */
  --color-primary: #6d2eb8;
  --color-primary-variant: #d9bbff;
  --color-primary-hover: #8848d6;
  --color-accent: #bb86fc;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Surfaces */
  --color-surface: #0b0b0b; /* Elevation 1 */
  --color-surface-variant: #0b0b0b; /* Elevation 1 */
  --color-surface-high: #191919; /* Elevation 2 */
  --color-surface-high-hover: var(--color-surface-higher);
  --color-surface-higher: #333333; /* Elevation 3 */
  --color-surface-higher-hover: #484848; /* Elevation 3 */

  /* Glyphs */
  --color-on-surface: rgb(221, 221, 221);
  --color-on-surface-high: rgb(236, 236, 236);
  --color-on-surface-higher: #ffffff;

  --color-border: rgba(125, 125, 125, 0.9);
  --color-border-hover: rgba(137, 137, 137, 0.9);
  --color-border-selected: rgba(161, 161, 161, 0.9);

  /* States */
  --color-success: #199b1e;
  --color-error: #d24340;
  --color-warning: #d59600;
  --color-info: #1888e4;

  /* Shadows */
  --shadow-1: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  --shadow-2: rgba(0, 0, 0, 0.1) 0px 20px 29px -4px, rgba(0, 0, 0, 0.04) 0px 10px 60px -5px;
  --shadow-3: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 8px, rgb(0 0 0 / 3%) 0px 8px 11px, rgb(0 0 0 / 5%) 0px 11px 12px 4px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

  /* Misc. */
  --filter-invert: 0; /* For non-variable shades applied */
  --subpage-shade-x-color: var(--color-surface); /* The shade around the subpage container */
  --subpage-title-shade: linear-gradient(275deg, rgb(0 0 0 / 17%) 0%, rgba(0, 0, 0, 0.01) 75%, rgba(0, 0, 0, 0) 100%);
  --surface-shade: linear-gradient(
    to bottom right, 
    hsl(0deg 0% 50% / 2%), 
    hsl(0deg 0% 0% / 39%)
  ); /* Subpage, dialog, toast container surface */
}

html.theme-light {
  /* Brand */
  --color-primary: #007f6e;
  --color-primary-variant: #015a4e;
  --color-primary-hover: #005b4f;
  --color-accent: #0bb79f;
  /* Surfaces */
  --color-surface: #fff;
  --color-surface-variant: #e6e6e6;
  --color-surface-high: #f5f5f5;
  --color-surface-higher: #e3e3e3;
  --color-surface-higher-hover: #cfcfcf;

  /* Glyphs */
  --color-on-surface: #333333;
  --color-on-surface-high: #2b2b2b;
  --color-on-surface-higher: #121212;

  --color-border: rgba(90, 90, 90, 0.9);
  --color-border-hover: rgba(121, 121, 121, 0.9);
  --color-border-selected: rgba(114, 114, 114, 0.9);


  /* States */
  --color-success: #388e3c;
  --color-error: #d32f2f;
  --color-warning: #fbc02d;
  --color-info: #0288d1;

  /* Misc. */
  --filter-invert: 1;
  --subpage-shade-x-color: var(--color-surface-variant);
  --subpage-title-shade: linear-gradient(275deg, rgb(247 247 247 / 39%) 0%, rgb(255 255 255 / 65%) 75%, rgb(255 255 255) 100%);
  --surface-shade: linear-gradient(to bottom right, hsl(0deg 0% 100%), hsl(0deg 0% 93.94%));
}