:root {
  /* Radius */
  --radius-circle: 50vw;
  --radius-2xs: calc(var(--radius-xs) * 0.5);
  --radius-xs: calc(var(--radius-s) * 0.5);
  --radius-s: calc(var(--radius-m) * 0.5);
  --radius-m: 20px;
  --radius-l: calc(var(--radius-m) * 1.5);
  --radius-xl: calc(var(--radius-l) * 1.5);
  --radius-2xl: calc(var(--radius-xl) * 1.5);

  /* Width */
  --content-width: 80rem;
  --text-max-width: 39rem;
  --btn-min-width: 8em;
  --border-width: 0.1rem;

  /* Focus */
  --focus-color: var(--secondary-500);
  --focus-width: 0.2rem;
  --focus-offset: 0.2rem;

  /* Transition */
  --transition: var(--transition-duration) var(--transition-timing)
    var(--transition-delay);
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --transition-delay: 0s;

  /* Box shadow */
  --shadow-xs: 0 12px 30px -13px
    color-mix(in srgb, var(--primary-950) 22%, transparent);
  --shadow-s: 0 20px 40px -16px
    color-mix(in srgb, var(--primary-950) 28%, transparent);
  --shadow-m: 0 28px 56px -20px
    color-mix(in srgb, var(--primary-950) 30%, transparent);
  --shadow-l: 0 36px 64px -22px
    color-mix(in srgb, var(--primary-950) 35%, transparent);
  --shadow-xl: 0 40px 80px -22px
    color-mix(in srgb, var(--primary-950) 45%, transparent);
  --shadow-btn-primary: 0 12px 24px -12px
    color-mix(in srgb, var(--primary-800), var(--primary));
  --shadow-btn-primary-hover: 0 12px 24px -12px
    color-mix(in srgb, var(--primary), var(--secondary-400));
  --shadow-btn-white: 0 12px 24px -12px var(--white-50);
  --shadow-btn-white-hover: 0 0 24px 0 var(--white-80);
  --shadow-btn-soft: 0 12px 24px -12px
    color-mix(in srgb, var(--primary-400), transparent);
  --shadow-btn-soft-hover: 0 12px 24px -12px
    color-mix(in srgb, var(--secondary-400), transparent);
}