:root {
  --color-loader: #fbfcfe;
  --color-on-loader: color-mix(in srgb, #191c1d 8%, transparent);
}

[data-theme-mode="light"]:is(:root body) {
      --color-info: #414bda;
      --color-on-info: #ffffff;
      --color-info-container: #e0e0ff;
      --color-on-info-container: #00036b;

      --color-success: #0b6d36;
      --color-on-success: #ffffff;
      --color-success-container: #9ef6b0;
      --color-on-success-container: #00210b;
    }

[data-theme-mode="dark"]:is(:root body) {
      --color-info: #bec2ff;
      --color-on-info: #0007a8;
      --color-info-container: #242ec2;
      --color-on-info-container: #e0e0ff;

      --color-success: #82d996;
      --color-on-success: #003918;
      --color-success-container: #005226;
      --color-on-success-container: #9ef6b0;
    }

:root {

  --color-star: rgb(250 165 72);

  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-lg-inc: 20px;
  --radius-xl: 28px;
  --radius-xl-inc: 32px;
  --radius-xxl: 48px;
  --radius-rounded: 999px;
  --radius-circled: 50%;

  --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-4: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px rgba(0, 0, 0, 0.15);
  --shadow-5: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px rgba(0, 0, 0, 0.15);

  --font-display-lg: 400 57px/64px var(--font-family);
  --font-display-md: 400 45px/52px var(--font-family);
  --font-display-sm: 400 36px/44px var(--font-family);

  --font-headline-lg: 400 32px/40px var(--font-family);
  --font-headline-md: 400 28px/36px var(--font-family);
  --font-headline-sm: 400 24px/32px var(--font-family);

  --font-title-lg: 400 22px/28px var(--font-family);
  --font-title-md: 500 16px/24px var(--font-family);
  --font-title-sm: 500 14px/20px var(--font-family);

  --font-body-lg: 400 16px/24px var(--font-family);
  --font-body-md: 400 14px/20px var(--font-family);
  --font-body-sm: 400 12px/16px var(--font-family);

  --font-label-lg: 400 14px/20px var(--font-family);
  --font-label-md: 400 12px/16px var(--font-family);
  --font-label-sm: 500 11px/16px var(--font-family);

  --transition-expressive-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --transition-expressive-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1);
  --transition-expressive-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);

  --transition-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
  --transition-expressive-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
  --transition-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);

  --transition-standard-fast-spatial: 350ms cubic-bezier(0.27, 1.06, 0.18, 1);
  --transition-standard-default-spatial: 500ms cubic-bezier(0.27, 1.06, 0.18, 1);
  --transition-standard-slow-spatial: 750ms cubic-bezier(0.27, 1.06, 0.18, 1);

  --transition-standard-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
  --transition-standard-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
  --transition-standard-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);

  --ripple-circle: radial-gradient(circle, color-mix(in srgb, currentColor 12%, transparent) 40%, transparent 41%);
  --ripple-full: radial-gradient(circle, color-mix(in srgb, currentColor 12%, transparent) 100%, transparent 41%);
}

@keyframes spin {
  100% {
    rotate: 360deg;
  }
}