/*Global variables*/
:root {
  /* Extra Color variables*/
  --base-white: hsl(var(--base-h) var(--base-l) 98%);
  --primary-white: hsl(var(--primary-h) var(--primary-l) 98%);
  --action-white: hsl(var(--action-h) var(--action-l) 98%);
  /* Component Styles*/
  --tab-radius: var(--btn-radius);
  --box-shadow: 0px 12px 24px -8px var(--base-ultra-dark-trans-10);
  --box-shadow-primary: 0px 12px 24px -8px var(--primary-ultra-dark-trans-10);
  --box-shadow-accent: 0px 12px 24px -8px var(--accent-ultra-dark-trans-10);
  --card-border: 1px solid var(--base-light);
  --card-border--primary: 1px solid var(--primary-light);
  --fr-card-radius-half: calc(var(--fr-card-radius) / 2);
  --avatar-size: 12rem;
  --bg-card--gradient: linear-gradient(60deg, var(--base-light-trans-20), var(--primary-light-trans-10));
}